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

CSS for Rollover Effect on Image Block: Poster


bcrealty
Go to solution Solved by tkn191,

Question

I have used the following CSS to add a rollover effect on any image with a link, although it does not work when an image is changed to a poster. Does anyone know the fix for this? Any help would be greatly appreciated!


 a:link img {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

example: www.reverogroup.com/test

Edited by bcrealty
code fix
Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

There was one issue with this code in that it applied to all image blocks, including those that didn't have a link to anything. Below is an update to this code with an extra little bit to help make s

12 answers to this question

Recommended Posts

  • 4

Try this one. It worked on my image poster blocks:


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





Link to post
  • 2

Hello @HouseofDB Thanks for your code. It worked great but now I realized that my image is not clickable. Hover work just fine, but the main purpose of image (link) is not working. Can you help me with that?

Link to post
  • 1

There was one issue with this code in that it applied to all image blocks, including those that didn't have a link to anything. Below is an update to this code with an extra little bit to help make sure this only applies to images with a linked URL...

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

.image-block .image-linked:hover:before {background: black;opacity: .6;transition: all .5s ease-in-out; }

Hope it helps.

Link to post
  • 0

Hey, thanks for sharing, it works for the hover effect although the thumbnail link doesn't work anymore, I think the hover might be overriding it.. do you know how to fix it?

Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...