Jump to content

CSS for Rollover Effect on Image Block: Poster

Recommended Posts

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

Link to comment
  • Replies 12
  • Views 15.8k
  • Created
  • Last Reply
  • 4 weeks later...
  • 4 weeks later...

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
  • 6 months later...
  • 2 months later...
  • 3 months later...
  • 2 months later...

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
  • 7 months later...
  • 4 months later...


This topic is now archived and is closed to further replies.

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