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

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

Красивый Hover эффект для изображения CSS3-такой скрипт хорошо подойдет для фотохостингов,которые предоставляет информация визуального типа а именно,фотографии,тематика которых зависит от тем сайта-это может быть и сайт про природу,животных,кинозвезд,футболистов,смешные картинки и так далее.При нажатии на изображение картинка приблизится и не просто приблизится а с красивым эффектом

Установка: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

Код
.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%;  
}
Красивый Hover эффект для изображения CSS3
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: Turbo
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar