» »

Красивый Hover эффект для изображения CSS3


Красивый 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
27.04.2016 Просмотров: 434 Комментарий: (2)

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

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

Комментарий: 2
Kosten
Kosten 27.04.2016 19:501
0
Angerfist, красота, знал бы тему переписал бы, то напишу что то не нужное.
FeStemBer
FeStemBer 27.04.2016 20:132
0
Кролика, кто так ушетал, или он под барбетурой. biggrin
avatar