Question

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!

Answer 1

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