Jump to content

CSS for hovering text on poster images

Recommended Posts

Site URL: https://wombat-bobcat-nap5.squarespace.com/

Hello,

Basically I want to use a poster image with an active link to take you to another page, but I only want the text to appear when the mouse is hovering over the image, the effect on other image layouts isn't right and poster seems to be the best but we don't yet have the hover option on SS yet. 

If anyone can share the CSS for this I would be very grateful. 

Thanks, 

R

Link to comment
22 hours ago, derricksrandomviews said:

This will make text appear on hover, but it may break your url link. Won't hurt to try it out. 


.image-block:before { 
content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
   top: 0;
   left: 0;  
 opacity: .5;
    background:;  }

 .image-block:hover:before {
   background: white;
   opacity: .3;
   transition: all .3s ease-in-out; 
  }

Doesn't seem to work, it doesn't break the link but the text isn't disappearing and reappearing as the mouse moves, it's just always there as usual. Thank you though for taking the time to reply. 

Link to comment
1 hour ago, tuanphan said:

Your site is private. can you setup password & share url?

It is staying private for now as it's for a client, sorry. As above, the website I linked has the idea I was looking for with the text only appearing when hovering over the image? 

 

Thanks

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.