Увеличение картинки при наведении CSS
 | |
| В статье узнаете, как можно увеличить изображение картинки при помощи наведение клика на изображение, что все выстраивается с помощью стиля CSS. Этот эффект простой и больше подойдет для сайта, где в материале превалирует изображение. А здесь пользователю и пользователям остается навести на любую картинку, как оно автоматически увеличивается по тем размерам, что изначально идут по умолчанию. Остается взять ссылку на изображение и в писать ее по месту, где уже выставлены стили CSS, и вмести сними нужно поместить в материал или там, где изначально вы хотите видеть. Первый вариант:  Установка: HTML Код <img src="http://zornet.ru/_fr/79/s6865174.jpg" class="uvelichiva"> CSS Код .uvelichiva{ display:inline-block; margin-left:10px; margin-top:10px; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; transform: scale(1,1); transition-timing-function: ease-out; transition-duration: 550ms; transform: scale(1,1); transition-timing-function: ease-out; transition-duration: 550ms; } .uvelichiva:hover { transform: scale(1.2,1.2); transition-timing-function: ease-out; transition-duration: 550ms; transform: scale(1.2,1.2); transition-timing-function: ease-out; transition-duration: 550ms; -webkit-transform: scale(1.2,1.2); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1.2,1.2); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; } Этот вариант из описание, где увеличение происходит не в блоке, а на странице. Демонстрация Второй вариант:  Установка: HTML Код <div class="uvelsivatsud"><img src="http://zornet.ru/_fr/79/s6787665.jpg" alt="ZorNet.Ru — сайт для вебмастера" class="uvelsivatsud"></div> CSS Код .uvelsivatsud { display: inline-block; /* Строчно-блочный элемент */ overflow: hidden; /* Скрываем всё за контуром */ } .uvelsivatsud img { transition: 1s; /* Время эффекта */ display: block; /* Убираем небольшой отступ снизу */ } .uvelsivatsud img:hover { transform: scale(1.2); /* Увеличиваем масштаб */ } Этот вариант идет на увеличение картинки в основе блока, где веб мастер задает в стилистике скорость. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
