1

I've seen an interesting image hover effect being used a lot lately and was wondering whether anyone has any tips or advice on how best to create this effect?

What I'd like to create is an effect, so that when you hover over an image, the image fades and a magnifying glass or similar icon fades in. Highlighting the fact that if you click the image, it will enlarge etc.

Here is a nice example of the effect: http://themes.mysitemyway.com/infocus/gallery/portfolio/

Any advice or pointers would be great!

ade123
  • 2,773
  • 8
  • 29
  • 32
  • Sorry, thanx for highlighting. I'm actually fairly new to this, but I'll look through my other questions and accept the best answers :o) – ade123 Feb 06 '11 at 07:29
  • Hi i once made a image hover zoom example for another question here, it's not exactly what you want but maybe it can help you: http://www.jsfiddle.net/dV7jb/ – Andy Feb 05 '11 at 10:07

1 Answers1

3

The transparency effect is achieved with .fadeTo()

All you need to do is place the image with the magnifying glass under the actual photo using css positioning and fade the main image to something like 0.4 

$('.hover_fade').hover(
  function() {
    $(this).fadeTo("slow", 0.4);
  },
  function() {
    $(this).fadeTo("slow", 1);
  }
);

this first function is fired when you've hovered over an element with a class of hover_fade, the second function is for when the mouse leaves the element

Serge
  • 1,066
  • 2
  • 7
  • 24
  • Cheers Serge, this actually makes it seem fairly simple. I'll give it a go. Do you know if there are likely to be any browser issues with this effect. I know in the past I have had issues with IE and fading transparencies. – ade123 Feb 06 '11 at 07:33
  • I don't have access to IE 6 or IE 7 right now but I know this works nicely on IE8. I think it should also work on the older IEs as long as the image you're using isn't a transparent png already. Here's an answer that might be useful to you http://stackoverflow.com/questions/1284163/jquery-ie-fadein-and-fadeout-opacity/1322628#1322628 – Serge Feb 07 '11 at 02:13
  • That's also handy to know. Thanks again Serge! – ade123 Feb 07 '11 at 06:12