» »

Эффект приближения изображения на CSS

Эффект приближения изображения на CSS

Красиво смотрится изображение, которое подключено к эффекту, где при наведении курсора на картинка начнет медленно приближаться при помощи CSS. И в этом материале собираемся поделиться HTML и CSS-кодом для красивого оформление, которое заключается для создания эффекта увеличения с наведением на картинку, что подключены к этому значению.

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

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



HTML

Код
<div class="pegesamub">
  <img src="Ссылка на изображение" width="558" height="325">
  <div class="kegon-mousen klidsanud"></div>
</div>

CSS

Код
.pegesamub {
  position: relative;
  border: 2px solid #d6d1d1;
  margin: 3%;
  overflow: hidden;
  width: 558x;
  height: 325px;
  cursor: pointer;
  border-radius: 3px;
}

.pegesamub img {
  max-width: 100%;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.pegesamub:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

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

Демонстрация
2019-05-30 Загрузок: 1 Просмотров: 291 Комментарий: (0)

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

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

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