Jump to content

Targeting only Linked Images for hover effects

Recommended Posts

Posted

Site URL: http://www.samuelhunter.com

I have some code that is currently applying itself to any image that has text with it (regardless of layout). I'd like it to only apply to specific images: those that are links to further pages.

Another option is to target images that are poster-layout, as only poster-layout images are currently links on my site.

Here's what I've got so far:

.sqs-block-image-figure:hover .image-card-wrapper { filter: opacity(0.0); transition: 1.0s;}
.sqs-block-image-figure:hover a img { filter: brightness(1.0); transition: 1.0s; cursor: pointer;}
.sqs-block-image-figure:not(:hover) a img { filter: brightness(0.7); transition: 0.0s;}

 

The second two lines work perfectly, but the first is applying too broadly. I'd like that to only apply to linked or poster-layout images (whatever is easiest)

  • Replies 0
  • Views 415
  • Created
  • Last Reply

Archived

This topic is now archived and is 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.