Красивый Hover эффект для изображения CSS3
 | |
| Сразу приведу пример: Демо Всегда на сайте веб мастер старается создать красивый эффект, и основном он делает на изображение. Так как на нем можно сделать больше, чем к примеру на ссылках, и вот несколько представлено, которые вы можете для себя выбрать и установить, это может быть как фотоальбом, где больше и по теме подойдем, но и не исключаю вид материала, любой категорий. Применить данный эффект можно в любых модулях и блоках где есть изображения,не забудьте, что вы должны проверять работоспособность эффекта в последней версии вашего браузера, который должен поддерживать CSS3 и HTML5. Хотя здесь мы используем только CSS3. Для этого эффекта нам нужно будет создать структуру в HTML и назначить блокам соответствующие стили в CSS. В качестве HTML элементов используем блок для изображения и блок для слоя над этим изображением, который будет плавно исчезать при наведении мыши. Вот примерная структура нашего блока изображений: HTML Код <div class='images' id='image1'> <div class='layer'></div> <img src='images/picture.jpg' alt="" width="200" height="200" border="0" /> </div> <div class='images' id='image2'> <div class='layer'></div> <img src='images/picture.jpg' alt="" width="200" height="200" border="0" /> </div> <div class='images' id='image3'> <div class='layer'></div> <img src='images/picture.jpg' alt="" width="200" height="200" border="0" /> </div> <div class='images' id='image4'> <div class='layer'></div> <img src='images/picture.jpg' alt="" width="200" height="200" border="0" /> </div> Также нам нужно будет удалить затеняющий слой над изображением, чтобы изображение как бы проявлялось. Специально для каждого затеняющего слоя назначаем отдельные стили, чтобы вы могли видеть какими способами можно убирать эти слои. В итоге получился вот такой код CSS для hover эффекта на изображениях: CSS3 Код .images{ float:left; margin: 20px; -webkit-transform:scale(1.0); -webkit-transition-duration: 0.5s; -moz-transform:scale(1.0); -moz-transition-duration: 0.5s; -o-transform:scale(1.0); -o-transition-duration: 0.5s; } .images:hover{ box-shadow:0px 0px 40px #ccc; -o-transform:scale(1.2); -o-box-shadow:0px 0px 40px #ccc; -moz-transform:scale(1.2); -moz-box-shadow:0px 0px 40px #ccc; -webkit-transform:scale(1.2); -webkit-box-shadow:0px 0px 40px #ccc; } .images .layer{ width: 200px; height: 200px; background-color:#000; position: absolute; opacity:0.5; -o-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; } #image1:hover .layer{ width:0%; } #image2:hover .layer{ height:0%; } #image3:hover .layer { height:0%; margin-top:100px; } #image4:hover .layer{ margin-left:100px; margin-top:100px; height:0%; width:0%; } Остается только проверить работоспособность его на сайте и в браузерах. Надеюсь вы сможете применить где нибудь этот эффект. Источник: mainview.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
