Эффект приближения изображения на 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 и выставить класс к тому коду, где присутствуют картинки, это может быть вид материалов или галерея изображение, что безусловно украсит своим эффектом и станет более оригинально смотреться. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |