ZorNet.Ru — сайт для вебмастера » HTML и CSS » 15 стильных hover эффекта для сайта в CSS

15 стильных hover эффекта для сайта в CSS

Здесь веб разработчику представлена большой набор для hover-эффект, который идет под изображение при наведение на его клика на чистом CSS3. Где по умолчанию мы видим картинку, то только стоит на ее навести клик, как она меняется или подключается анимация. Сейчас у вас появилась возможность увидеть, как использовать этот эффект css3, который исполняется при наведении курсора на изображение, что может находится в галерей или на вид материалов.

Вообще материал полностью посвящен эффекту вспыхивающего изображения при помощи CSS. Это очень крутой эффект. И все мы знаем, что эффект парения в основном используется для привлекательной страницы. Это очень легко реализовать на вашем сайте, что сделать интернет ресурс после как поставите трюк, он станет более привлекателен.

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

Как пример, это один их коллекций трюков, где по умолчанию картинка идет в черно белом оттенке, но при наведение появляется название и изображение становится цветным.

Оригинальные hover-эффекты для изображений с помощью CSS

Итак, начнем:

HTML

Код

<div class="mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/5650826.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9801862.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/2475677.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo01">1. Zoom In #1</h2>
<div class="depakoles_unknogesak_1 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/2370350.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/7890322.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/7305921.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo02">2. Zoom In #2</h2>
<div class="depakoles_unknogesak_2 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/1504386.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/4284502.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/6304560.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo03">3. Zoom Out #1</h2>
<div class="depakoles_unknogesak_3 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/0502691.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/0343438.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/5397535.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo04">4. Zoom Out #2</h2>
<div class="depakoles_unknogesak_4 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/2196636.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/5199305.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9858709.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo05">5. Slide</h2>
<div class="depakoles_unknogesak_5 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/8791754.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/4981783.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/3353475.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>
<div class="depakoles_unknogesak_6 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/0679060.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9592829.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9360370.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo07">7. Blur</h2>
<div class="depakoles_unknogesak_7 mplemenzatun">
  <div>
  <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/5210795.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/1642766.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo08">8. Gray Scale</h2>
<div class="depakoles_unknogesak_8 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/1642766.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/1642766.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/1642766.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo09">9. Sepia</h2>
<div class="depakoles_unknogesak_9 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/7614691.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/7614691.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/7614691.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo10">10. Blur + Gray Scale</h2>
<div class="depakoles_unknogesak_10 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9441868.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9441868.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9441868.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo11">11. Opacity #1</h2>
<div class="depakoles_unknogesak_11 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/0943460.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/0943460.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/0943460.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo12">12. Opacity #2</h2>
<div class="depakoles_unknogesak_12 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9291516.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9291516.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/9291516.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo13">13. Flashing</h2>
<div class="depakoles_unknogesak_13 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/3747532.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/3747532.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/3747532.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo14">14. Shine</h2>
<div class="depakoles_unknogesak_14 mplemenzatun">
  <div>
  <figure><img src="http://zornet.ru/_fr/64/3660568.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/3660568.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/3660568.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

<h2 id="demo15">15. Circle</h2>
<div class="depakoles_unknogesak_15 mplemenzatun">
  <div>
  <figure><img src="https://picsum.photos/300/200?image=244" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/3974670.jpg" /></figure>
  <span>Hover</span>
  </div>
  <div>
  <figure><img src="http://zornet.ru/_fr/64/3974670.jpg" /></figure>
  <span>Hover</span>
  </div>
</div>

CSS

Код

.mplemenzatun {
  margin: 15px 15px 0;
  padding: 0;
}
.mplemenzatun:last-child {
  padding-bottom: 60px;
}
.mplemenzatun::after {
  content: '';
  clear: both;
  display: block;
}
.mplemenzatun div {
  position: relative;
  float: left;
  width: 300px;
  height: 200px;
  margin: 0 0 0 25px;
  padding: 0;
}
.mplemenzatun div:first-child {
  margin-left: 0;
}
.mplemenzatun div span {
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index: -1;
  display: block;
  width: 300px;
  margin: 0;
  padding: 0;
  color: #444;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  opacity: 0;
}
figure {
  width: 300px;
  height: 200px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
figure:hover+span {
  bottom: -36px;
  opacity: 1;
}

/* Zoom In #1 */
.depakoles_unknogesak_1 figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_1 figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

/* Zoom In #2 */
.depakoles_unknogesak_2 figure img {
  width: 300px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_2 figure:hover img {
  width: 350px;
}

/* Zoom Out #1 */
.depakoles_unknogesak_3 figure img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_3 figure:hover img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Zoom Out #2 */
.depakoles_unknogesak_4 figure img {
  width: 400px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_4 figure:hover img {
  width: 300px;
}

/* Slide */
.depakoles_unknogesak_5 figure img {
  margin-left: 30px;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_5 figure:hover img {
  margin-left: 0;
}

/* Rotate */
.depakoles_unknogesak_6 figure img {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_6 figure:hover img {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}

/* Blur */
.depakoles_unknogesak_7 figure img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_7 figure:hover img {
  -webkit-filter: blur(0);
  filter: blur(0);
}

/* Gray Scale */
.depakoles_unknogesak_8 figure img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_8 figure:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* Sepia */
.depakoles_unknogesak_9 figure img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_9 figure:hover img {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

/* Blur + Gray Scale */
.depakoles_unknogesak_10 figure img {
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_10 figure:hover img {
  -webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}

/* Opacity #1 */
.depakoles_unknogesak_11 figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_11 figure:hover img {
  opacity: .5;
}

/* Opacity #2 */
.depakoles_unknogesak_12 figure {
  background: #1abc9c;
}
.depakoles_unknogesak_12 figure img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.depakoles_unknogesak_12 figure:hover img {
  opacity: .5;
}

/* Flashing */
.depakoles_unknogesak_13 figure:hover img {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
  opacity: .4;
  }
  100% {
  opacity: 1;
  }
}
@keyframes flash {
  0% {
  opacity: .4;
  }
  100% {
  opacity: 1;
  }
}

/* Shine */
.depakoles_unknogesak_14 figure {
  position: relative;
}
.depakoles_unknogesak_14 figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.depakoles_unknogesak_14 figure:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}
@-webkit-keyframes shine {
  100% {
  left: 125%;
  }
}
@keyframes shine {
  100% {
  left: 125%;
  }
}

/* Circle */
.depakoles_unknogesak_15 figure {
  position: relative;
}
.depakoles_unknogesak_15 figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background: rgba(255,255,255,.2);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.depakoles_unknogesak_15 figure:hover::before {
  -webkit-animation: circle .75s;
  animation: circle .75s;
}
@-webkit-keyframes circle {
  0% {
  opacity: 1;
  }
  40% {
  opacity: 1;
  }
  100% {
  width: 200%;
  height: 200%;
  opacity: 0;
  }
}
@keyframes circle {
  0% {
  opacity: 1;
  }
  40% {
  opacity: 1;
  }
  100% {
  width: 200%;
  height: 200%;
  opacity: 0;
  }
}

Вы можете перейти на demo страницу и изначально посмотреть как все выглядит после установки. Также, чтоб легче найти тот класс эффекта. все пронумеровано, также в стилистике они идут отдельно.

Как можно понять при наблюдении на стилистику, то все эффекты выполнены с использованием простого кода, который закреплен под CSS3, где эффекты становятся намного уникальнее.

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

Демонстрация

14 Марта 2019 Загрузок: 1 Просмотров: 1353 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0