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

Стильный CSS hover эффект при наведении

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

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

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

Все проверено на работоспособность:

Hover-эффект при наведении курсора на изображение

Приступаем к установке:

HTML

Код

CSS

Код

.karoundol-emnloading {
  padding: 35px 0;
  width: 100%;
  height: 215px;
  margin: 0 auto;
  clear: both;
  position: relative;
  overflow: hidden;
}
.karoundol-emnloading ul {
  padding-top: 49px;
  position: relative;
}
.karoundol-emnloading li {
  width: 25%;
  margin: 0 0.0%;
  float: left;
  margin-bottom: 15px;
}
.karoundol-emnloading a {
  display: block;
  position: relative;
  width: 100%;
  height: 250px;
  margin: 0;
  padding: 0;
}
.karoundol-emnloading a:before {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 35%;
  left: 45%;
  margin: -20px 0 0 -8px;
  background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/lodsanuved.png) no-repeat;
  content: '';
  opacity: 0;
  z-index: 1;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.karoundol-emnloading a:hover:before {
  top: 48%;
  opacity: 1;
}
.karoundol-emnloading a:after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(33, 32, 32, 0.8);
  content: '';
  opacity: 0;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.karoundol-emnloading a:hover:after {
  opacity: 2;
}
.karoundol-emnloading a img {
  padding: 0;
  margin: 0;
  position: absolute;
  max-width: 100%;
  height: auto;
}

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

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

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

26 Апреля 2019 Просмотров: 1351 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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