Zoom In Image On Hover
<!DOCTYPE html>
<html>
<head>
<style>
img{
margin:auto;
display:block;
width: 400px;
height:400px;
transition:width 2s,height 2s;
transition-timing-function: linear;
}
img:hover{
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src="3.jpg">
</body>
</html>
Zoom Out Image on Hover
<!DOCTYPE html>
<html>
<head>
<style>
img{
margin:auto;
display:block;
width: 400px;
height:400px;
transition:width 2s,height 2s;
transition-timing-function: linear;
}
img:hover{
width:800px;
height:800px;
}
</style>
</head>
<body>
<img src="3.jpg">
</body>
</html>
No comments :
Post a Comment