Creating Overlay with Image Module

Beaver Builder
1

I’m trying to replicate a feature on a website that’s using BB. This is the website:

If you look at the circle images under “We’re Here to Help You”, you can see that the image has the caption below it and on hover, both the image AND the caption change color.

I have this CSS that I think should work but the missing piece is that there isn’t a color for the overlay:

.fl-photo-link.fl-photo-crop-circle .overlay img {
opacity: 1;
margin: -1px;
width: 101%;
max-width: 101%;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
}

.fl-photo-link a .fl-photo-caption {
color: #918b87;
transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
-webkit-transition: color .25s ease-in-out;
-o-transition: color .25s ease-in-out;
line-height: 22px;
overflow: visible;
text-overflow: unset;
white-space: normal;
}

When I use the photo module and add the above CSS, it doesn’t have an overlay on it. Any suggestions?

Thank you so much!

Donna

2

Hi Donna,

Try adding this without your other css.

.fl-node-59fcd9881f363 .fl-photo-link.fl-photo-crop-circle .overlay {
    background-color: rebeccapurple;
}
3

Thank you for your quick response. Unfortunately, that didn’t work. Nothing changes when I add that (both with and without by other CSS). I also tried to change the background-color from rebeccapurple to a hex code)…

4

Where are you putting your css styles?

I hate to use !important, but try this to make sure the background color is not being overridden.

.fl-node-59fcd9881f363 .fl-photo-link.fl-photo-crop-circle .overlay {
    background-color: #ff0000 !important;
}
5

Thank you again for your assistance! I’m putting the CSS styles here:

https://share.getcloudapp.com/yAu6EN8e

Under the Beaver Builder Tools, Layout CSS/Javascript

Donna

6

That css should work. I’ve tested it in devtools. Assuming you haven’t removed this css yet, I’m not seeing it in your page source code, or any of the CSS stylesheets.

Try clearing your Beaver Builder cache (Settings > Beaver Builder > Tools: Clear cache. Then clear the cache in your hosting account or CDN.

7

I can’t thank you enough for your diligence in trying to help me! Just to clarify: the website I linked to is the one that has the effect that I’m trying to replicate (it’s the example of what I want to do).

The site I’m using this for is not a public site (it has a Coming Soon on) so I don’t think you were looking at the actual page I’m using.

Here it is on a test page you can view:

I also changed the .fl-node to the one on my page and it still doesn’t show up for me…

Thank you again for your patience with helping me!

8

No problem. :slight_smile: Give this a try. You can prepend it with a specific .fl-node if you want to limit it to specific modules. You can adjust the opacity and background-color to your preference.

.fl-photo.fl-photo-crop-circle .fl-photo-content {
	background-color: #fbb03b;
	border-radius: 50%;
}

.fl-photo.fl-photo-crop-circle .fl-photo-content a:hover img {
	opacity: 0.8;
}
9

SOOO close! That added the opacity over hover! Yay and THANK YOU!! That last piece that’s missing that my client wants to accomplish is to have the photo AND the caption link below it change the opacity color on hover.

10

YAY! Replace all the css I gave you with what’s below and you should be set.

.fl-photo.fl-photo-crop-circle .fl-photo-content {
	background-color: #fbb03b;
	border-radius: 50%;
}

.fl-photo.fl-photo-crop-circle:hover img {
	opacity: 0.8;
}

.fl-photo.fl-photo-crop-circle:hover .fl-photo-caption {
	opacity: 0.5;
}
11

YES!!! Thank you SO MUCH!! :slight_smile:

You were so patient with helping me with this - very much appreciated!