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

Красивые hover-эффекты на 3 варианта в CSS

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

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

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

Первый вариант:

HTML

Код

CSS

Код

.mudamakeb-kegoubusin a {
  position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;
  height: auto;
  text-align: center;
  background: #c4ddf3;
}
.mudamakeb-kegoubusin a img {
  opacity: 1;
  transition: opacity 0.6s;
  position: relative;
  max-width: 100%;
  height: auto;
  display: block;
}
.mudamakeb-kegoubusin a:hover img {
  opacity: 0.6;
}
.mudamakeb-kegoubusin a div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mudamakeb-kegoubusin a div::before,
.mudamakeb-kegoubusin a div::after {
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  content: "";
  opacity: 0;
  transition: opacity 0.7s, transform 0.7s;
  pointer-events: none;
}
.mudamakeb-kegoubusin a div::before {
  border-top: 2px solid #eef0f3;
  border-bottom: 2px solid #eef0f3;
  transform: scale(0, 1);
}
.mudamakeb-kegoubusin a div::after {
  border-right: 2px solid #eef0f3;
  border-left: 2px solid #eef0f3;
  transform: scale(1, 0);
}
.mudamakeb-kegoubusin a:hover div::before,
.mudamakeb-kegoubusin a:hover div::after {
  opacity: 1;
  transform: scale(1);
}
.mudamakeb-kegoubusin div img, .mudamakeb-kegoubusin div i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  transition: transform 0.3s ease 0s;
  transform: scale(0);
  font-size: 50px;
  color: #f5f5f5;
}
.mudamakeb-kegoubusin a:hover div img,
.mudamakeb-kegoubusin a:hover div i {
  transform: scale(1);
  opacity: 1;
}

Данный элемент идет без шрифтового знака, а на графическом элементе веб дизайне.

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

Второй вариант:

HTML

Код

CSS

Код

.nalmosted-vebusines * {
  box-sizing: border-box;
}
.nalmosted-vebusines {
  color: #ececf1;
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: #2a76b7;
  line-height: 0;
}
.nalmosted-vebusines img {
  opacity: 1;
  transition: opacity 0.40s;
}
.nalmosted-vebusines > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.nalmosted-vebusines > div::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  opacity: 0;
  transition: opacity 0.5s;
  background-image: linear-gradient(
  45deg,
  #2a77b9 0%,
  transparent 40%,
  rgba(251, 247, 247, 0.15)
  );
}
.nalmosted-vebusines:hover > div::before {
  opacity: 1;
}
.nalmosted-vebusines i,
.nalmosted-vebusines div img {
  transition: opacity 0.40s;
  display: inline-block;
  font-size: 37px;
  width: 28px;
  height: 28px;
  color: #fcfeff;
  position: absolute;
  bottom: 11px;
  left: 11px;
  opacity: 0;
  z-index: 1;
}
.nalmosted-vebusines:hover i,
.nalmosted-vebusines:hover div img {
  opacity: 1;
}
.nalmosted-vebusines .demugas {
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(
  225deg,
  #fbfbfb,
  #f1eeee 19%,
  #b9b4b4 40%,
  #a9a4a4 45%,
  #868282 50%,
  rgba(1, 1, 1, 0.7) 50%,
  rgba(2, 2, 2, 0.4) 60%,
  rgba(3, 3, 3, 0.3)
  );
  box-shadow: 0 0 10px rgba(4, 4, 4, 0.5);
  transition: all 0.5s ease;
}
.nalmosted-vebusines .demugas:before,
.nalmosted-vebusines .demugas:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 15%;
  bottom: 8%;
  width: 69%;
  max-width: 298px;
  max-height: 100px;
  height: 55%;
  box-shadow: 0 12px 15px rgba(2, 2, 2, 0.3);
  transform: skew(-10deg) rotate(-6deg);
}
.nalmosted-vebusines .demugas:after {
  left: auto;
  right: 7%;
  bottom: auto;
  top: 15%;
  transform: skew(-15deg) rotate(-84deg);
}
.nalmosted-vebusines a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
.nalmosted-vebusines:hover .demugas {
  width: 89px;
  height: 89px;
}

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

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

Третий вариант:

HTML

Код

CSS

Код

.besatangou-koucompes a {
  display: inline-block;
  background: #0c61e4;
  line-height: 0;
}
.besatangou-koucompes a img {
  transition: filter 0.7s linear;
  filter: brightness(2) grayscale(1) opacity(0.3);
}
.besatangou-koucompes a:hover img {
  filter: none;
}

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

Демонстрация
Источник: Atuin.ru

08 Января 2019 Просмотров: 1301 Комментариев: (0)

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

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

Kosten

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