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

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

Здесь представлены простые Hover эффекты, которые безусловно украсят ваш сайт, так как они созданы на чистом CSS, где задействуем на изображение. Под каждый вариант идет свой оригинальный эффект появление надписи, что появляются по всем сторонам. Чтоб понимали, это при наведении на картинку вы увидите прозрачную гамму в заданном оттенке цвета. Но главное, чтоб корректно смотрелось описание или название на нем, это безусловно важный фактор для любого трюка.

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

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

Красивый эффект наведение курсора на CSS

Начнем:

HTML

Код

<div class="vecome-darknes">
  <h1>4 эффекта наведения</h1>
  <h2>Используйте поле для наведения текста.</h2>
</div>

<div class="dozensenug">
  <a href="#">
  <div class="nugeavies-top red"><img src="Ссылка на изобрадение" />
  <h2>Категория скрипты для uCoz</h2>
  </div>
  </a>
</div>

<div class="dozensenug">
  <a href="#">
  <div class="nugeavies-bottom green"><img src="Ссылка на картинку" />
  <h2>ZorNet.Ru — сайт для вебмастера</h2>
  </div>
  </a>
</div>

<div class="dozensenug">
  <a href="#">
  <div class="nugeavies-left blue"><img src="Ссылка на скрин" />
  <h2>Используйте поле для наведения</h2>
  </div>
  </a>
</div>

<div class="dozensenug">
  <a href="#">
  <div class="nugeavies-right dark"><img src="Ссылка на фото" />
  <h2>В категорий шаблоны для uCoz</h2>
  </div>
  </a>
</div>

CSS

Код

.vecome-darknes {
  margin: 15px;
}

.vecome-darknes h1 {
  font-weight: 300;
  margin: 0;
}

.vecome-darknes h2 {
  font-weight: 300;
  margin: 0;
}

.dozensenug {
  float: left;
  max-width: 400px;
  margin: 15px;
}

.red {
  background: #b31e1e;
}

.green {
  background: #2da258;
}

.blue {
  background: #1a8fca;
}

.dark{
  background: #2d2d2d;
}

.nugeavies-top img,
.nugeavies-bottom img,
.nugeavies-left img,
.nugeavies-right img {
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  transition: opacity 0.4s;
  vertical-align: middle;
}

.nugeavies-top:hover img,
.nugeavies-bottom:hover img,
.nugeavies-left:hover img,
.nugeavies-right:hover img {
  opacity: 0.2;
}

.nugeavies-top:hover,
.nugeavies-bottom:hover,
.nugeavies-left:hover,
.nugeavies-right:hover {
  opacity: 1;
}

.nugeavies-top h2 {
  position: absolute;
  margin: -300px 0 0 18px;
  opacity: 0;
  font-size: 15px;
  font-weight: 100;
  color: #eaeaea;
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -kthtml-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.nugeavies-top:hover > h2 {
  opacity: 1;
  margin: -80px 0 0 18px;
}
/* END TOP EFFECT */

/* BOTTOM EFFECT */
.nugeavies-bottom h2 {
  position: absolute;
  margin: 0 0 0 20px;
  opacity: 0;
  font-size: 15px;
  font-weight: 100;
  color: #eaeaea;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -kthtml-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.nugeavies-bottom:hover > h2 {
  opacity: 1;
  margin: -80px 0 0 18px;
}
/* END BOTTOM EFFECT */

/* LEFT EFFECT */
.nugeavies-left h2 {
  position: absolute;
  margin: -80px 0 0 0;
  opacity: 0;
  font-size: 15px;
  font-weight: 100;
  color: #eaeaea;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -kthtml-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.nugeavies-left:hover > h2 {
  opacity: 1;
  margin: -80px 0 0 18px;
}
/* END LEFT EFFECT */

/* RIGHT EFFECT */
.nugeavies-right h2 {
  position: absolute;
  margin: -80px 0 0 400px;
  opacity: 0;
  font-size: 15px;
  font-weight: 100;
  color: #eaeaea;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -kthtml-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.nugeavies-right:hover > h2 {
  opacity: 1;
  margin: -80px 0 0 18px;
}

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

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

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

11 Июня 2019 Загрузок: 1 Просмотров: 1421 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 11 Июня 2019 01:37¹ 0 Если брать Hover, который встречал на материале, то по мне, этот самый простой, где представлен эффект в основе, а далее можно самостоятельно доработать, хотя под название уже есть форма.