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

I had the same question. Following.

I had the same question. Following.

I also have the same question.

I also have the same question.

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

Thank you so much, that works perfectly!

Thanks for sharing this! Is there a way to have this effect only apply to images that contain links?

Thank you this is great~How would you all the text to do the same? Poster images don't have hover effects built into squarespace x.x

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?

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.

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?

I am having the same issue as @matuskoprda. I am getting the effect to work nicely however the image (link) is no longer clickable. Has anyone figured out a solution to this?