With CSS3 transition property, we can do some simple animation effects. The following example will zoom in the image when mouse hover.
<!DOCTYPE html>
<html>
<head>
<title>Eureka! | CSS3 - Image zoom on mouse hover</title>
<style type="text/css">
.image-wrapper {
width: 200px;
height: 200px;
overflow: hidden;
}
.image {
width: 200px;
height: 200px;
position: relative;
left: 0;
top: 0;
transition: all 1s linear;
}
.image:hover {
width: 400px;
height: 400px;
left: -100px;
top: -100px ;
}
</style>
</head>
<body>
<div class="image-wrapper">
<img class="image" src="https://ykyuen.files.wordpress.com/2014/03/mickey-mouse.jpg">
</div>
</body>
</html>
Done =)
Eureka! 