Auto add magnifying icon to thumbnails

Question

Hi,

I'm looking to add a centered magnifying glass icon to my portfolio gallery. Like the effect at http://jquerystyle.com/gallery. I know I can do this with css at each instance, but I would like to find a way to do it automatically. Any jquery plugins that do this?

Thanks!

Answer 1

DEMO: http://jsbin.com/useki4/4

SOURCE: http://jsbin.com/useki4/4/edit

a little bit of jquery added for doing animation transition:

$(function() {
    $('.gallery li').hover(function() {
        $(this).attr('class', 'current');
        $('.gallery li:not(.current)').stop().fadeTo(300, 0.25);
    },
    function() {
        $(this).removeClass('current');
        $('.gallery li').stop().fadeTo(150, 1.0);
    });
});​

Assuming HTML

<ul class="gallery">
     <li>
       <a href="#">
         <img src="" alt="" />
         <span class="magnifier"></span>
        </a>
     </li>
</ul>

CSS:

.gallery {
  list-style: none;
  width: 600px;
  margin: 0 auto
}
.gallery li {
  position: relative;
  margin: 0;
  overflow: hidden;
  float: left;
  display: inline;
}
.gallery li a {
  text-decoration: none;
  float: left;
}
.gallery li a img {
  width: 150px;
  height: 150px;
  float: left;
  margin: 0;
  border: none;
  padding: 10px;
}
.gallery li .magnifier {
  width: 32px;
  height: 32px;
  background: transparent url(magnifier_zoom_in.png) no-repeat;
  position: absolute;
  right: 65px;
  bottom: 65px;
  font-size: 1.2em;
  color: #fff;
  padding: 0;
}
.gallery a:hover .magnifier {
  background: transparent url(magnifier_zoom_out.png) no-repeat;
}