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

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

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

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

Проверено на работоспособность на демонстрации, где ссылка ниже.

Увлекательная анимация эффекта на чистом CSS

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

HEAD - что идет под выбор иконки:

Код

HTML

Код

CSS

Код

.kalibrovka{
  min-height: 100vh;
  overflow: hidden;
  width: 100%;
  padding:2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bearing{
  overflow: hidden;
  height: 300px;
  width:350px;
  position: relative;
  cursor: pointer;
  margin:0 15px;
  bearing-shadow: 0 0 25px 1px rgba(0,0,0,.3);
  transition: .5s;
  background-color: #555;
  border-radius: 10px;
}
.bearing:after{
  content:'';
  position: absolute;
  z-index: 1;
  top:50%;
  left:50%;
  width:500px;
  height:500px;
  transform: translate(140%,-50%);
  background-color: rgba(63,142,199,0.8);
  border-radius: 50%;
  transition:.8s;
}
.bearing:hover:after{
  transform: translate(-50%,-50%);
}
.bearing:hover img{
  transform: translate(-50%,-50%) scale(1.3) rotate(-360deg);
}
img{
  position: absolute;
  height:120%;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  transition: .8s;
}
i{
  position: absolute;
  z-index: 2;
  top:50%;
  left:50%;
  transform: translate(2000px,-50%);
  color:#fff;
  transition: .8s;
  transition-timing-function: ease-in;
}
.bearing:hover i{
  transform: translate(-50%,-50%);
  transition-timing-function: ease;
}

Как видим не сложная установка, здесь идет каркас в HTML, но в дальнейшем все оформление зависит от CSS, который можно кардинально изменить. Это как по своему стилю, в который входит оттенок цвета, и скорости появление эффекта.

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

11 Ноября 2022 Загрузок: 1 Просмотров: 782 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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