The another interesting hover effect is Zoom out effect. This animated effects will done by using simple css3 code. Below is the simple example shows the how zoomout effects will works. Here is the live demo, take the live demo page and see how it is working. The image hover effect is very very important to highlight the image when hover. It is very useful to the gallery page and product pages, service pages etc... Here i will provided the code for zoomout effect animation code on hover the image. I hope this is very useful for your website. I will post another effect in next post.
Code for Zoomout Effect on hover the image using Css3
<html>
<head>
<title>Zoom out effect with caption using css3</title>
<style>
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.hover03 figure img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover03 figure:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
</style>
</head>
<body>
<div class="hover03 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="2.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="3.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="4.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>
</body>
</html>
<head>
<title>Zoom out effect with caption using css3</title>
<style>
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.hover03 figure img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover03 figure:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
</style>
</head>
<body>
<div class="hover03 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="2.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="3.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="4.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>
</body>
</html>
0 Comments