Zoom Effect on Image Hover using CSS
As we all of know that CSS is best part of all Designer. We always tries to make our website is more beautiful and attractive that’s why we use CSS, Animation, flash and so on. So In this article, we have seen some zoom effect on image hover using pure CSS. So let’s discuses
Image Grow and Shrink on Image Hover
Source Code
<html>
<head>
<style type="text/css">
.frame {
height: 200px;
width: 200px;
overflow: hidden;
}
.zoomin img {
height: 200px;
width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomin img:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="zoomin frame">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmZ_b5SmEBfcvuCD6igV7WnVGzrp2bYJxJLh2v7rAT924pgfViyIf1NPHZE60koZqzJRXkCvOAivws-387Hz1JrWNit56VWvoUjobhQ5NKkOHXIKOn4qodolevrufaredR6MFIb8trLCU/s320/56847f89d1065e69cce987cd04b0dfad.jpg" width="180" />
</div>
</body>
</html>
Demo:-
Grow Image on image Hover
Source Code:-
<html>
<head>
<style type="text/css">
.zoomin img {
height: 200px;
width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomin img:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="zoomin">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmZ_b5SmEBfcvuCD6igV7WnVGzrp2bYJxJLh2v7rAT924pgfViyIf1NPHZE60koZqzJRXkCvOAivws-387Hz1JrWNit56VWvoUjobhQ5NKkOHXIKOn4qodolevrufaredR6MFIb8trLCU/s320/56847f89d1065e69cce987cd04b0dfad.jpg" width="180" />
</div>
</body>
</html>
Demo:-
Zoom-Out Image on Image Hover
Source Code:-
<html>
<head>
<style type="text/css">
.frame {
height: 200px;
width: 200px;
overflow: hidden;
}
.zoomout img {
height: 300px;
width: 300px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomout img:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="zoomout frame">
img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmZ_b5SmEBfcvuCD6igV7WnVGzrp2bYJxJLh2v7rAT924pgfViyIf1NPHZE60koZqzJRXkCvOAivws-387Hz1JrWNit56VWvoUjobhQ5NKkOHXIKOn4qodolevrufaredR6MFIb8trLCU/s320/56847f89d1065e69cce987cd04b0dfad.jpg" width="180" />
</div>
</body>
</html>
Demo:-
Shrink Image on Image Hover
Source Code:-
<html>
<head>
<style type="text/css">
.zoomout img {
height: 300px;
width: 300px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomout img:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="zoomout">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmZ_b5SmEBfcvuCD6igV7WnVGzrp2bYJxJLh2v7rAT924pgfViyIf1NPHZE60koZqzJRXkCvOAivws-387Hz1JrWNit56VWvoUjobhQ5NKkOHXIKOn4qodolevrufaredR6MFIb8trLCU/s320/56847f89d1065e69cce987cd04b0dfad.jpg" width="180" />
</div>
</body>
</html>
Demo:-
Zoom Effect on Image Hover using CSS
Reviewed by NEERAJ SRIVASTAVA
on
10:54:00 AM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
10:54:00 AM
Rating:
Nice article
ReplyDelete