Image hover effect only on linked images?

I have an image hover CSS code implemented, but it affects all images on my site. Is there a way to affect just the linked images?

This is the code I am currently using:

.sqs-block-image .intrinsic .image-block-wrapper img:hover { opacity: 0.5; }

I would love help with this, too!

Can you post a URL?

I think I found it! Try this out:

a:link img {
 opacity: 1.0;
 filter: alpha(opacity=100); /* For IE8 and earlier */
}

a:hover img {
 opacity: 0.6;
 filter: alpha(opacity=60); /* For IE8 and earlier */
}

Thanks jasonvb, that works perfectly!

Thanks for this help, but when I used it the "View Project" hover text also became lighter. Is there a way to make the hover background that pops up (Pacific) darker? Here is my site: https://dawn-krueger-n5o7.squarespace.com - go to Projects...

Thanks so much!Dawn

Although this question has already been answered, I figured I'd add a little code I luckily figured out while combining two codes together to get the full result I was looking for.

So, I have a few transitional (code block) images on my site (http://www.goffcreative.com), specifically the subscription image where the button transitions colors.

I came across this answer while looking for a resolution for hover roll-overs on linked IMAGES and GALLERIES only, however even my coded transitional images (which I didn't want to change) were affected by this code.

Anyhow, super-long story a little shorter, if you ONLY want images and gallery images that are linked to have the hover effect, use this:

img.thumb-image:hover {

opacity: 0.6; filter: alpha(opacity=60); }

If you don't have any code block links (you don't want affected) on your site, this isn't necessary.

Thanks @jasonvb for the original! You're awesome.

Hello, I was trying to achieve the same but I have a gallery block on my page which I don't want to be affected. Would love to know the modified code so I could only affect a linked image on my page.

Thanks for your help.

I'm trying to figure out the same thing!

I was very confused that how can i make the effect in the images and gallery of my website.then i ll find a way to concern with the professional that help me out so much in this. If you have any issue with this please concern with them

I was very confused that how can i make the effect in the images and gallery of my website.then i ll find a way to concern with the professional that help me out so much in this. If you have any issue with this please concern with them

I have the same problem, and didn't manage to solve it. What exactly does 'not Squarespace friendly code' mean . I can try the tutorial of these friends https://youtu.be/jbyYG4x98c . These guys tutorials really helpful to me. I can suggest to you . You can also try it i hope its help to you a lot https://youtu.be/jbyYG4x98c Thanks

This is super old, but exactly what I'm looking for! However, this code isn't working for me. Can anyone help me with an update?

site: biancapasternack.design (only want it hover to happen on images with links)

thanks :)

Ok I was searching of the same answer and was able to make an hover effect work so helping people who might want the same This is working for :
- images that are a link
- images in a summary block that are therefore a link by default 
- images in a blog area that are therefore a link by default

And not on :
- images in a gallery
- images that are not a link

.sqs-block-image a:hover img {
  filter: 
  grayscale(100%);
}

/*Image in a summary:  hover effect*/
.sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide  a:hover img {
  filter: 
  grayscale(100%);
}

/*Image in a main blog page :  hover effect*/
.BlogList-item-image-link:hover {
  filter: 
  grayscale(100%);
}

🙂

I think my question is along these lines, if it's not please point me in the right direction...

I'd like a drop shadow filter added when the various images are hovered over, but the images are placed sporadically throughout the site. I've tried listing the block IDs, separated by commas, but it doesn't work. Do I have to list the :hover animation separately for each image or can I just list it once and if so, how do I do so?

Here's what I have:
#block-03cb185697cf6cef5ae8:hover {filter: drop-shadow(0.3rem 0.3rem 0.1rem rgba(0, 0, 0, 0.5))
}

1 hour ago, hilary said:

I'd like a drop shadow filter added when the various images are hovered over

Your CSS worked for me for a single image block. I changed the block ID to my own block. I made some adjustments.

#block-yui_3_17_2_1_1648414546237_9701 .image-block-wrapper:hover {

  filter : drop-shadow( 0.3rem 0.3rem 0.1rem rgba( 0, 0, 0, 0.5 ) );
  
  }

For multiple blocks use a format like the following.

#block-yui_3_17_2_1_1648414546237_9701 .image-block-wrapper:hover,
#block-03cb185697cf6cef5ae8 .image-block-wrapper:hover

  {
  
    filter : drop-shadow( 0.3rem 0.3rem 0.1rem rgba( 0, 0, 0, 0.5 ) );
    
    }

Let us know how it goes.

@creedon Hmm, ok I tried it both ways - with one image block and then multiple and neither worked for me.

This did though: 🤷‍♀️

#block-yui_3_17_2_1_1681922577794_33752:hover,
#block-63648473c063af264f4f85f1:hover {filter: drop-shadow(0.15rem 0.15rem 0.04rem rgba(0, 0, 0, 0.5))
}