ZorNet.Ru — сайт для вебмастера » HTML и CSS » 12 вариантов эффектов CSS при наведении

12 вариантов эффектов CSS при наведении

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

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

Установка

HTML

Код
<body>
  <div class="avolupanem">
  <h2>Some nice effects on hover</h2>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  <div>
  <div class="anema-bosam">
  <h3>ZORNET.RU</h3>
  Краткое описание.
  <button>Перейти</button>
  </div>
  <img src="http://zornet.ru/_fr/89/0952251.jpg" alt="Ключевые слова">
  </div>
  </div>  
</body>

CSS

Код
.avolupanem {
  width: 90%;
  margin: 20px auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid #888
}
.avolupanem > h2
{
  width: 100%;
  text-align: center;
  padding: 10px;
}

.avolupanem > div
{
  width: 30%;
  height: 30%;
  margin: 10px;
  padding: 5px;
  border: 1px solid #ddd;
  flex: 1 2 auto;
  position: relative;
  overflow: hidden
}

.avolupanem > div > .anema-bosam
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(250, 250, 250, 0.5);
  font-size: 1.2em;
  padding: 5px;
  text-align: center;
  z-index: 10;
  transition: all .5s ease-in-out
}

.avolupanem > div > .anema-bosam h3
{
  margin: 10px
}

.avolupanem > div > .anema-bosam button
{
  display: block;
  width: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10%;
  background-color: rgba(255, 165, 165, 0.6);
  border: 1px solid #fafafa;
  color: #fafafa;
  font-family: Roboto slab;
  font-weight: bold;
  padding: 20px;
  font-size: 1.6em;
  cursor: pointer;
}

.avolupanem > div > img
{
  width: 100%;
  height: 100%;
  transition: all .5s ease-in-out
}

.avolupanem > div:hover > img
{
  filter: blur(3px)
}

/*--- Starting effects ---*/

/*1) translate top*/

.avolupanem > div:first-of-type > .anema-bosam
{
  top: -150%
}

.avolupanem > div:first-of-type:hover > .anema-bosam
{
  top: 0
}

/*2) translate bottom*/

.avolupanem > div:nth-of-type(2) > .anema-bosam
{
  top: 100%
}

.avolupanem > div:nth-of-type(2):hover > .anema-bosam
{
  top: 0
}

/*3) scale from center*/

.avolupanem > div:nth-of-type(3) > .anema-bosam
{
  transform: scale(0)
}

.avolupanem > div:nth-of-type(3):hover > .anema-bosam
{
  transform: scale(1)
}

/*4) translate from top left*/

.avolupanem > div:nth-of-type(4) > .anema-bosam
{
  top: -100%;
  left: -100%
}

.avolupanem > div:nth-of-type(4):hover > .anema-bosam
{
  top: 0;
  left: 0
}

/*4) translate from top right*/

.avolupanem > div:nth-of-type(5) > .anema-bosam
{
  top: -100%;
  left: 100%
}

.avolupanem > div:nth-of-type(5):hover > .anema-bosam
{
  top: 0;
  left: 0
}

/*5) translate from bottom left*/

.avolupanem > div:nth-of-type(6) > .anema-bosam
{
  top: 100%;
  left: -100%
}

.avolupanem > div:nth-of-type(6):hover > .anema-bosam
{
  top: 0;
  left: 0
}

/*7) translate from bottom right*/

.avolupanem > div:nth-of-type(7) > .anema-bosam
{
  top: 100%;
  left: 100%
}

.avolupanem > div:nth-of-type(7):hover > .anema-bosam
{
  top: 0;
  left: 0
}

/*8) scale with rotate*/

.avolupanem > div:nth-of-type(8) > .anema-bosam
{
  transform: scale(0) rotate(0)
}

.avolupanem > div:nth-of-type(8):hover > .anema-bosam
{
  transform: scale(1) rotateZ(720deg)
}

/*9) scale with rotate*/

.avolupanem > div:nth-of-type(9) > .anema-bosam
{
  left: -80%;
  transform: scale(0) rotate(0);
  transform-origin: bottom left
}

.avolupanem > div:nth-of-type(9):hover > .anema-bosam
{
  left: 0;
  transform: scale(1) rotateZ(360deg)
}

/*10) scale animation*/

.avolupanem > div:nth-of-type(10) > .anema-bosam
{
  transform: scale(0)
}

@keyframes rebound
{
  0%
  {
  transform: scale(0)
  }
   
  50%
  {
  transform: scale(1)
  }
  75%
  {
  transform: scale(.5)
  }
  100%
  {
  transform: scale(1)
  }
}

.avolupanem > div:nth-of-type(10):hover > .anema-bosam
{
  opacity: 1;
  animation: rebound 1s ease-in-out;
  transform: scale(1)
}

/*11) scale with rotate*/

.avolupanem > div:nth-of-type(11) > .anema-bosam
{
  transform: rotateX(180deg);
  transform-origin: top;
  transition: all 1s linear
}

.avolupanem > div:nth-of-type(11):hover > .anema-bosam
{
  top: 0;
  transform: rotateX(0deg)
}

/*12) scale with rotate*/

.avolupanem > div:nth-of-type(12) > .anema-bosam
{
  opacity: 0
}

.avolupanem > div:nth-of-type(12):hover > .anema-bosam
{
  opacity: 1
}

@media only screen and (max-width: 600px)
{
  .avolupanem > div
  {
  width: 100%
  }
   
  .avolupanem > div > .anema-bosam
  {
  font-size: .85em
  }
   
  .avolupanem > div > .anema-bosam button
  {
  font-size: .9em;
  padding: 8px
  }
}

@media only screen and (min-width: 600px) and (max-width: 1200px)
{
  .avolupanem > div
  {
  width: 45%
  }
   
  .avolupanem > div > .anema-bosam
  {
  font-size: .85em
  }
   
  .avolupanem > div > .anema-bosam button
  {
  font-size: .9em;
  padding: 8px
  }
}

@media only screen and (min-width: 1200px)
{
  .avolupanem > div
  {
  width: 30%
  }
   
  .avolupanem > div > .anema-bosam
  {
  font-size: 1em
  }
   
  .avolupanem > div > .anema-bosam button
  {
  font-size: .9em;
  padding: 15px
  }
}

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

Демонстрация
16 Октября 2020 Загрузок: 2 Просмотров: 870 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar