Сегодня я расскажу вам, как создавать различные CSS3 эффектов. Мы использовали javascript. В результате страницы галереи у нас будет 9 образов, каждый из которых имеет собственный hover эффект.
Шаг 1. HTML
Во-первых, давайте подготовим основную HTML-разметку для нашей демо-галереи. Как вы можете видеть, результат структуры довольно легкий. Вот набор DIV объектов. Каждый из них содержит одно изображение и некоторые виртуальные маски (DIV). Последний элемент будет содержать две маски.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>CSS3 Image Hover Effects | Демонстрация с сайта s-sd.ru</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/gall.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center><a href="http://www.s-sd.ru"><img src="/files/logo.png" alt=""/></a></center>
<!-- panel with buttons -->
<div class="photos">
<div>
<img src="images/pic1.jpg" />
<div></div>
</div>
<div>
<img src="images/pic2.jpg" />
<div></div>
</div>
<div>
<img src="images/pic3.jpg" />
<div></div>
</div>
<div>
<img src="images/pic4.jpg" />
<div></div>
</div>
<div>
<img src="images/pic5.jpg" />
<div></div>
</div>
<div>
<img src="images/pic6.jpg" />
<div></div>
</div>
<div>
<img src="images/pic7.jpg" />
<div></div>
</div>
<div>
<img src="images/pic8.jpg" />
<div></div>
</div>
<div class="pair">
<img src="images/pic9.jpg" />
<div></div>
<div></div>
</div>
</div>
</body>
</html>
Шаг 2. CSS
Я опускаю стили layout.css. Здесь ничего интересного. Самое интересное - следующий файл (где я приготовил все необходимые стили нашей галерее):
.photos {
width: 945px;
height: 400px;
margin: 100px auto;
position:relative;
}
.photos > div {
background-color: rgba(128, 128, 128, 0.5);
border: 2px solid #444;
float: left;
height: 100px;
margin: 5px;
overflow: hidden;
position: relative;
width: 300px;
z-index: 1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-ms-transform:scale(1.0);
-o-transform:scale(1.0);
transform:scale(1.0);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.photos > div img{
width: 100%;
}
.photos > div:hover{
z-index: 10;
-webkit-transform:scale(2.0);
-moz-transform:scale(2.0);
-ms-transform:scale(2.0);
-o-transform:scale(2.0);
transform:scale(2.0);
}
.photos > div div {
background: url(../images/hover.gif) repeat scroll 0 0 transparent;
cursor: pointer;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
z-index: 15;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.photos > div:nth-child(1):hover div {
height: 0%;
}
.photos > div:nth-child(2):hover div {
height: 0%;
margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
width: 0%;
}
.photos > div:nth-child(4):hover div {
margin-left: 300px;
width: 0%;
}
.photos > div:nth-child(5):hover div {
height: 0%;
margin-left: 150px;
margin-top: 50px;
width: 0%;
}
.photos > div:nth-child(6):hover div {
margin-left: 150px;
width: 0%;
}
.photos > div:nth-child(7):hover div {
height: 0%;
margin-left: 150px;
margin-top: 50px;
width: 0%;
-webkit-transform: rotateX(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
height: 0%;
margin-left: 150px;
margin-top: 50px;
width: 0%;
-webkit-transform: rotateZ(600deg);
-moz-transform: rotateZ(600deg);
-ms-transform: rotateZ(600deg);
-o-transform: rotateZ(600deg);
transform: rotateZ(600deg);
}
.photos > div.pair div {
width: 50%;
}
.photos > div.pair div:nth-child(odd) {
margin-left: 150px;
}
.photos > div.pair:hover div {
width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
margin-left: 300px;
}
Вот и все. Готово!
Материал взят из зарубежного источника - script-tutorials.com/css3-image-hover-effects и представлен исключительно в ознакомительных целях.