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

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

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

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

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

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

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

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

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

HTML

Код
<div class="kalibrovka">
  <div class="bearing">
  <img src="Ссылка на изображение #1">
  <i class="fab fa-youtube fa-5x"></i>
  </div>
  <div class="bearing">
  <img src="Ссылка на изображение #2">
  <i class="fab fa-youtube fa-5x"></i>
  </div>
  <div class="bearing">
  <img src="Ссылка на изображение #3">
  <i class="fab fa-youtube fa-5x"></i>
  </div>
  </div>
   
</div>

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, который можно кардинально изменить. Это как по своему стилю, в который входит оттенок цвета, и скорости появление эффекта.

Демонстрация
2022-11-11 Загрузок: 1 Просмотров: 240 Комментарий: (0)

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

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

Оставь свой отзыв

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