How do I put overlay color on "meet the team" section on the homepage?

how do I put overlay color on “meet the team” section on the homepage?

this is my site http://orangeye.ie/

Please help me ASAP.

Thanks guys. I solved it.

Just found right class to edit.

Thanks again.

2 Likes

Guys, I need you help.

I was to able to put an overlay(opacity).

But, I want it only on the image. Right now, its on the whole box.

Please help me. thanks again.

Perhaps specify a bit more clearly what you’re referring to, as I’m not sure what to look at there.

if you open my site and scroll down my homepage, you will see a meet the team section.

Thats what I am talking about.

I want to make it look like its on this page

thanks again.

At a glance, I can’t quite see how you are doing the opacity, but since the image is in the HTML, you could try something like just fading the image itself on hover. E.g.

.edgtf-elements-holder-item:hover img {opacity: 0.3;}

this is what I am doing

.edgtf-team.main-info-on-hover:hover .edgtf-team-social-holder {
  background-color: #1f4260 !important;
  opacity: 0.6;
  
}

Yep, so try something like this instead:

.edgtf-team.main-info-on-hover:hover img {
  background-color: #1f4260 !important;
  opacity: 0.6;
  webkit-transition: background-color .3s ease-out; */
}

yeah, but this way the background color is not working.

Ah, right, sorry. I forgot about that. Try all this instead:

.edgtf-team.main-info-on-hover:hover img {
  opacity: 0.6;
}

.edgtf-team.main-info-on-hover:hover .edgtf-team-social-holder {
  background-color: rgba(31, 66, 96, 0.6);
  webkit-transition: background-color .3s ease-out; 
}
1 Like

yeah. thats works perfectly. thanks again.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.