Главная » Файлы » Прочие скрипты » CSS

Отличные эффекты при наведении на картинки на CSS3 для вашего сайта
14.07.14, 15:22:10



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

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

Картинки оформляем следующим образом:
Код
<div class="grow pic">
  <img src="Ссылка на картинку" />
</div>
<div class="shrink pic">
  <img src="Ссылка на картинку" />
</div>
<div class="sidepan pic">
  <img src="Ссылка на картинку" />
</div>
<div class="vertpan pic">
  <img src="Ссылка на картинку" />
</div>


Обратите внимание на shrink pic, sidepan pic, sidepan pic, vertpan pic - то, что я пометил красным - классы анимаций. Список всех анимаций вы можете найти в css коде ниже

В самый низ вашего css вставляйте:
Код
/*PIC*/
  .pic {
  height: 150px;
  width: 150px;
  overflow: hidden;
  margin: 20px;
  border: 10px solid white;
  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 0px 0px 5px #111;
  float: left;
}
.pic:hover {
  cursor: pointer;
}
/*GROW*/
  .grow img {
  height: 300px;
  width: 300px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.grow img:hover {
  width: 400px;
  height: 400px;
}
/*SHRINK*/
  .shrink img {
  height: 400px;
  width: 400px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.shrink img:hover {
  width: 300px;
  height: 300px;
}
/*BLUR*/
  .blur img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.blur img:hover {
  -webkit-filter: blur(5px);
}
/*TILT*/
  .tilt {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.tilt:hover {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
/*MORPH*/
  .morph {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
/*SIDEPAN*/
  .sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
  -moz-transition: margin 1s ease;
  -o-transition: margin 1s ease;
  -ms-transition: margin 1s ease;
  transition: margin 1s ease;
}
.sidepan img:hover {
  margin-left: -200px;
}
/*VERTPAN*/
  .vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
  -moz-transition: margin 1s ease;
  -o-transition: margin 1s ease;
  -ms-transition: margin 1s ease;
  transition: margin 1s ease;
}
.vertpan img:hover {
  margin-top: -200px;
}
/*FOCUS*/
  .focus {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}
/*B&W*/
  .bw {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.bw:hover {
  -webkit-filter: grayscale(100%);
}
/*DARKEN*/
  .brighten img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.brighten img:hover {
  -webkit-filter: brightness(0%);
}
/*SEPIA*/
  .sepia img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.sepia img:hover {
  -webkit-filter: sepia(100%);
}
/*CONTRAST*/
  .contrast img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.contrast img:hover {
  -webkit-filter: contrast(185%);
}
/*HUE_ROTATE*/
  .hue-rotate img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.hue-rotate img:hover {
  -webkit-filter: hue-rotate(65deg);
}
/*INVERT*/
  .invert img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.invert img:hover {
  -webkit-filter: invert(100%);
}
/*OPACITY*/
  .opacity img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.opacity img:hover {
  opacity: 0.25;
}


Источник материала: КЛИК

Материал подготовлен Apocalypse

Категория: CSS | Добавил: Apocalypse | Теги: отличные, при, на, наведении, Вашего, CSS3, эффекты, картинки, для
Просмотров: 656 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: