Jump to content

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

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

 

Screen Shot 2022-02-14 at 2.59.57 PM.png

Screen Shot 2022-02-14 at 3.00.06 PM.png

Edited by arpllc
Link to comment
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

 

 

Screen Shot 2022-02-14 at 2.59.57 PM.png

Screen Shot 2022-02-14 at 3.00.06 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Screen Shot 2022-02-19 at 10.27.42 AM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.