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

Image hover effect only on linked images?


rbrinkerhoff

Question

  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

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

Link to comment
  • 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
Link to comment
  • 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.

Link to comment
  • 0

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

🙂

 

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...