Photo module: Text on hover with link

BB Theme
1

Spending a great deal of time trying to customize this. Should be pretty straight forward but is there a way to add text to a photo module on hover?

2

Not out of the box with BB Photo module: you’ll need a 3rd party addon (PowerPack, UABB…) or custom CSS.

3

Yeah, I have all of those. None of them do a simple text on hover. They are all cluttered with flashy animation. Just looking for simple HTML and CSS if anyone has it. On hover, show text.

4

PowerPack Image module has a simple feature to get an overlay + text on hover.
43

But if you prefer custom CSS, it should be quite simple too.

1 Like
5

Custom CSS would be the best option with default PHOTO module

6

Set a my-photo-hover class on the Photo module and try this custom CSS (requires a link set in the module):

.my-photo-hover a {
    position: relative;
    display: block;
}
.my-photo-hover a::before {
    content: "My text";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    transition: .3s all;
    font-size: 100px;
    color: white;
}
.my-photo-hover a:hover::before {
    opacity: 1;
}
7

Cool! Thank you. I’ll give that a shot.

8

Alternative CSS if you don’t set a link on the Photo module:

.my-photo-hover .fl-photo-content {
    position: relative;
}
.my-photo-hover .fl-photo-content::before {
    content: "My text";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    transition: .3s all;
    font-size: 100px;
    color: white;
}
.my-photo-hover-2 .fl-photo-content:hover::before {
    opacity: 1;
}
9

avanti

On your “Alternative CSS if you don’t set a link on the Photo module:” CSS script …

How do you specify which image shows the “My text” message on hover?

Thanks
Dave

10

Hi, the text is set in the content property of the CSS rule, it’s not an image :wink:

11

I understand.

If you have three different images and each has a different message, how is that coordinated? Does each image/message have separate CSS?

Thank you for posting your script and your response.

Best
Dave

12

Use multiple classes then:

• 1 class shared by all photo modules, containing the common settings:
as above, except content: "My Text";

• 1 class per module, containing a specific text:
content: "My Text 1";
content: "My Text 2";
…