Авто добавить значок увеличения к миниатюрам

Question

Я хочу добавить значок увеличительного стекла по центру в мою галерею портфолио.Как и эффект на http://jquerystyle.com/gallery. Я знаю, что могу делать это с помощью css в каждом случае, но я бы хотел найти способ сделать это автоматически.Какие-нибудь плагины jquery, которые делают это?

Спасибо!

Answer 1

ДЕМО: http://jsbin.com/useki4/4

ИСТОЧНИК: http://jsbin.com/useki4/4/edit

добавлено немного jquery для анимации перехода:

$(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);
    });
});​

Предполагается, 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;
}