Image hover effect only on linked images?

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.

And somehow I posted the wrong code...

Okay, here's the real one. Seriously this time:

a:link img {
 opacity: 1.0;
 filter: alpha(opacity=100);
}

a:hover img.thumb-image {
 opacity: 0.6;
 filter: alpha(opacity=60); 
}

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

🙂