В этой статье я покажу, как сделать простенькую галерею с эффектом приближения изображений. Делается она с помощью чистого 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>
<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;
}
background: #ccc;
}
- Центрируем галерею и задаём фоновый цвет.
.wrapper {
margin: 0 auto;
width: 1000px;
overflow: hidden;
background: #444;
}
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-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;
-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);
}
-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;
-webkit-box-shadow:0px 0px 30px #fff;
-moz-box-shadow:0px 0px 30px #fff;
Скачать исходники.