Jump to content

Image hover effect only on linked images?

Go to solution Solved by Guest,

Recommended Posts

  • 2 weeks later...
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 months later...
  • 4 weeks later...
  • 7 months later...

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.

Link to comment
  • Solution

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

Link to comment
  • 1 year later...
  • 1 month later...
  • 10 months later...
  • 2 weeks later...
  • 2 years later...
  • 10 months later...

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 {

/*Image in a summary:  hover effect*/
.sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide  a:hover img {

/*Image in a main blog page :  hover effect*/
.BlogList-item-image-link:hover {



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.