Веб-мастерская Ларисы ВоронинойCSS галерея с эффектом приближения
WEB-мастерская Ларисы Ворониной logo

CSS галерея с эффектом приближения. Янв 31 2017


В этой статье я покажу, как сделать простенькую галерею с эффектом приближения изображений. Делается она с помощью чистого CSS.

Для начала создайте папку gallery. В этой папке создайте папку images и два файла index.html и style.css

Для галереи потребуются шесть изображений размером 300px/400px.

В файле index.html пишем разметку.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" >
          <title>CSS галерея с эффектом приближения</title>
     </head>
     <body>
          <div class="wrapper">
               <img src="images/img1.jpg" />
               <img src="images/img2.jpg" />
               <img src="images/img3.jpg" />
               <img src="images/img4.jpg" />
               <img src="images/img5.jpg" />
               <img src="images/img6.jpg" />
          </div>
     </body>
</html>

В файле style.css пишем стили.

  • Задаём фоновый цвет для body.
body {
background: #ccc;
}
  • Центрируем галерею и задаём фоновый цвет.
.wrapper {
margin: 0 auto;
width: 1000px;
overflow: hidden;
background: #444;
}
  • Пишем стили для изображений.

Уменьшаем масштаб изображений до 0,7.

.wrapper img{
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
-o-transform:scale(0.7);
}

Определяем длительность анимации.

-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;

Делаем изображения слегка прозрачными.

opacity: 0.7;

Выставляем интервалы между изображениями.

margin: 15px;
  • Пишем стили для изображений при наведении на них курсора мыши.

Увеличиваем размер изображений.

.wrapper img:hover{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
}

Делаем изображения непрозрачными.

opacity: 1;

Добавляем подсветку.

box-shadow:0px 0px 25px #fff;
-webkit-box-shadow:0px 0px 30px #fff;
-moz-box-shadow:0px 0px 30px #fff;

Рейтинг@Mail.ru