Jump to content

Updated CSS For Hover Effect on Poster Images

Recommended Posts

I had originally asked this question years ago (here):

https://forum.squarespace.com/topic/79514-css-for-rollover-effect-on-image-block-poster/#comment-121074

The selected answer worked really well for awhile. Although it appears the coding has changed and this css blocks the link from being selected. I have tried altering the css any way possible, but I can't seem to target the issue correctly. I had originally thought the z-index may be the issue but targeting the link and changing it's z-index didn't fix the issue either. Any help would be greatly appreciated!

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • 5 months later...

I think I've found the answer.  Grayscale hover-over on posters with links only (without breaking the link!)

NB - I am not a developer so this might be nonsense.  The key was identifying the correct 'class-id' (?) - is that the correct term?  I told you I don't know what I'm doing.  This seems to work anyway.

.sqs-block-image-link img {
  filter: grayscale(0%);
  transition: all .5s;
}

.sqs-block-image-link:hover img {
  filter: grayscale(30%);
  transform: scale(1.2);
}

 

If any of you can get back to me with how I now might darken the opacity instead of using greyscale, that'd be perfect!

Link to comment

I've just found the 'brightness' filter too, which darkens the poster image on hover.  (This was the function I was actually after, contrary to me asking for 'opacity'!)

*The class selector seems to be what you were after though.

.sqs-block-image-link img {
  filter: brightness(100%);
  transition: all .4s;
}

.sqs-block-image-link:hover img {
  filter: brightness(70%);
  transform: scale(1.2);
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.