Wells CSS or Plugin for Custom Text During Hover Over Images in Image Blocks And Going Full Width

Hello,

Is there CSS or a plugin that will add text when hovering over images in an images block on a Wells Template page, and going full width. Similar to: https://colleenchrzanowski.com/client-work

Here is the page I would like to update with the CSS or Plugin: https://www.andyryanphotographer.com/projects

Thanks in advance.

On 2/13/2022 at 6:48 AM, arpllc said:

Hello,

Is there CSS or a plugin that will add text when hovering over images in an images block on a Wells Template page, and going full width. Similar to: https://colleenchrzanowski.com/client-work

Here is the page I would like to update with the CSS or Plugin: https://www.andyryanphotographer.com/projects

Thanks in advance.

You mean

Initial: Show image, no text

Hover: Show overlay, text over overlay

Is this right?

Add to Design > Custom CSS

.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    opacity: 0;
    z-index: 999;
   }

.margin-wrapper:after {
    content: "";
    background: pink;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 989;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}

div#block-yui_3_17_2_1_1643385275940_1762 .margin-wrapper:hover .image-slide-title {
   opacity: 1;
} 

div#block-yui_3_17_2_1_1643385275940_1762 .margin-wrapper:hover:after {
   opacity: 1;
}

Thanks @tuanphan.

Unfortunately, it does not resolve the issue. I am looking to two lines of text to the boxes on hover for the Projects page only (https://www.andyryanphotographer.com/projects), with First line: Project Name, Second Line: Client Name, and about a 75% opacity on hover so you can still see the images.

The code currently turns the images to pink on hover with only the one line of text. See attached.
Let me know if you have any additional thoughts or need more information from me.

Thanks

On 2/15/2022 at 2:58 AM, arpllc said:

Thanks @tuanphan.

Unfortunately, it does not resolve the issue. I am looking to two lines of text to the boxes on hover for the Projects page only (https://www.andyryanphotographer.com/projects), with First line: Project Name, Second Line: Client Name, and about a 75% opacity on hover so you can still see the images.

The code currently turns the images to pink on hover with only the one line of text. See attached.
Let me know if you have any additional thoughts or need more information from me.

Thanks

 

 

I see the text has 1 line only. Can you add 2 lines first? Or you need code to add 2 lines + hover effect?

6 hours ago, tuanphan said:

I see the text has 1 line only. Can you add 2 lines first? Or you need code to add 2 lines + hover effect?

This is a gallery block within a page, and the images were added separately. This layout only allows for one line in the image title name, and the text shown on the page pulls from that text field within the image.

So only one line at this time.