Главная » 2013 » Август » 20 » Эффекты при наведении на изображении на CSS3 (Полезное)
20.08.2013, 19:43

Эффекты при наведении на изображении на CSS3



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

Шаг 1. HTML

С разметкой все просто, у нас есть набор DIV объектов. Каждый из них содержит одно изображение и некоторые виртуальные маски. Последний элемент будет содержать две маски:

Код
<div class="code_sample"><pre class="brush: php">
  <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>


Шаг 2. 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;
}


ДЕМО
Материал взят с сайта infoscript.ru
Теги: Скачать Эффекты при наведении на изображении на CSS3
Скачать "Эффекты при наведении на изображении на CSS3"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: Полезное | Просмотров: 1669 | Добавил: Skaiman | Рейтинг: 4.0/1 |
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]