Удобная и информативная галерея на jQuery и CSS

В этом уроке мы сделаем галерею, которая красиво сочетает в себе изображение и информацию о нем.

Наша галерея будет содержать изображения и некоторый текст к каждому из них, при этом мы не будем использовать лишних информационных блоков. Работать это будет так: при наведении на картинку она уменьшается и появляется текст.

HTML

Html разметка нашей галереи:

<div>
<div>
      <img src="images/image01.jpg">
<div>
<h2>Taylor Swift</h2>
              Taylor Alison Swift (born December 13, 1989)
              is an American country pop singer-songwriter
              and actress.
</div>
</div>
<div>
      <img src="images/image02.jpg">
<div>
<h2>Rihanna</h2>
              Rihanna (born February 20, 1988) is a Barbadian
              R&B recording artist and model born in Saint
              Michael, Barbados.
</div>
</div>
<div>
      <img src="images/image03.jpg">
<div>
<h2>Black Eyed Peas</h2>
              The Black Eyed Peas is a Grammy Award winning hip
              hop group that formed in Los Angeles, California
              in 1995.
</div>
</div>
<div>
      <img src="images/image04.jpg">
<div>
<h2>Lady Antebellum</h2>
              Lady Antebellum is an American country
              music group formed in Nashville,
              Tennessee in 2006.
</div>
</div>
<div>
      <img src="images/image05.jpg">
<div>
<h2>Lady Gaga</h2>
              Lady Gaga is an American recording
              artist who rose to fame with her
               first two singles "Just Dance" and
              "Poker Face".
</div>
</div>
<div>
      <img src="images/image06.jpg">
<div>
<h2>The Killers</h2>
              The Killers is an American rock
              band from Las Vegas, Nevada, formed
              in 2002 who have sold over 16 million
              records worldwide.
</div>
</div>
</div>

CSS

.galleryContainer
{
width: 1024px;
}
.galleryImage {
     background-color:black;
     width:325px;
     height:260px;
     overflow:hidden;
     margin:5px;
     float:left;
}
.info{
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{
color:gray;
}
.info p {
color:white
}
.clear {
clear:both;
margin-top:10px;
}

jQuery

Для создания эффектов для нашей галереи мы будем использовать замечательные функции jQuery — .hover() и .animate()

$(document).ready(function()
{
    $('.galleryImage').hover(
        function()
        {
        $(this).find('img').animate(
                  { width:100,
                    marginTop:10,
                    marginLeft:10
                  }, 500);
         },
         function()
         {
          $(this).find('img').animate(
                   {width:325,
                    marginTop:0,
                    marginLeft:0
                  },300);
         });
});

На этом все 🙂 Не пропустите новые уроки!