CSS for Rollover Effect on Image Block: Poster

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

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 had the same question. Following.

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.

I had the same question. Following.

I also have the same question.

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?

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?

I also have the same question.