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



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 comment

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 comment
  • 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 comment
This topic is now closed to further replies.
  • Create New...