Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
rekha.garton

CSS for hovering text on poster images

Question

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

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0
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. 

Share this post


Link to post
  • 0
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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...