ZorNet.Ru — сайт для вебмастера » HTML и CSS » Hover-эффекты CSS наведения на изображение

Hover-эффекты CSS наведения на изображение

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

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

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

И так начнем:

Первым делом нужно подключить шрифтовые кнопки:

Код

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

Далее представлены 3 варианта с эффектом клика на изображение:

Простой эффект наведения изображения с одним значком

Коллекция потрясающих эффектов для изображений на CSS3

HTML

Код

CSS

Код

figure.material_kartinkoy {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  border: 4px solid #000;
  width: 100%;
  background: #000;
  text-align: center;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.material_kartinkoy * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.material_kartinkoy img {
  max-width: 100%;
  opacity: 1.0;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s linear;
  transition: .3s linear;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
figure.material_kartinkoy > div a {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  color: #ffffff;
}
figure.material_kartinkoy > div a i {
  display: inline-block;
  font-size: 58px;
  opacity: 0;
  top: 55%;
  position: relative;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.material_kartinkoy:hover img {
  opacity: 0.3;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.material_kartinkoy:hover > div i {
  opacity: 0.8;
  top: 50%;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

Этот трюк идет на темно прозрачную гамму цвета, где по центру появится иконка.

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

Эффект наведения масштаба изображения с одним значком

HTML

Код

CSS

Код

figure.originalnaya_effekta {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  border: 4px solid #000;
  width: 100%;
  background: #222222;
  text-align: center;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.originalnaya_effekta * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.originalnaya_effekta img {
  max-width: 100%;
  opacity: 1.0;
  -webkit-transition: opacity 0.35s, scale(1);
  transition: opacity 0.35s, scale(1);
  -webkit-transition: .3s linear;
  transition: .3s linear;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
figure.originalnaya_effekta > div a {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  color: #ffffff;
}
figure.originalnaya_effekta > div a i {
  display: inline-block;
  font-size: 58px;
  opacity: 0;
  top: 55%;
  position: relative;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.originalnaya_effekta > div::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 30px #000;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale3d(1.5, 1.5, 1);
  transform: scale3d(1.5, 1.5, 1);
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
figure.originalnaya_effekta:hover img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0.3;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.originalnaya_effekta:hover > div i {
  opacity: 0.8;
  top: 50%;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}
figure.originalnaya_effekta:hover > div::before {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

Аналогично первому материалу, только внутри добавлена рамка.

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

Эффект наведения изображения с несколькими значками справа

Hover это впечатляющии эффектов при наведении на чистом CSS3

HTML

Код

CSS

Код

figure.kuestions_vepromised {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.kuestions_vepromised * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.kuestions_vepromised img {
  max-width: 100%;
  position: relative;
  top: 0;
  opacity: 1.0;
  left: 0;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure.kuestions_vepromised > div {
  height: 100%;
  right: -80px;
  width: 70px;
  position: absolute;
  border-left: 2px solid #ffffff;
  top: 0;
  padding: 8px 4px;
  color: #ffffff;
  background: #000;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure.kuestions_vepromised > div a i {
  display: inline-block;
  font-size: 32px;
  color: #ffffff;
  opacity: 0.75;
  width: 100%;
  padding: 5px 15px;
  position: relative;
  right: -60px;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
figure.kuestions_vepromised:hover img {
  opacity: 0.5;
  left: -60px;
}
figure.kuestions_vepromised:hover > div {
  right: 0;
  opacity: 1;
}
figure.kuestions_vepromised:hover > div a i {
  right: 0;
}
figure.kuestions_vepromised:hover a:first-child i {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
figure.kuestions_vepromised:hover a:nth-child(2) i {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
figure.kuestions_vepromised:hover a:nth-child(3) i {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

Здесь эффект на социальных кнопках, которые появятся по правую сторону.

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

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

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

08 Июня 2020 Загрузок: 4 Просмотров: 995 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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