Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2
rbrinkerhoff

Image hover effect only on linked images?

Question

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

Edited by rbrinkerhoff
Tidy

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 3

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

Share this post


Link to post
  • 7

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 */
}

Edited by jasonvb

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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 :)

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...