Красивый 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
Установка: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%;
}
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%;
}
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: Turbo
Комментарии (0)