Zoom Effect in CSS
There are many different ways we can add a special effects to the web pages and one of them is adding a Zoom Effect on Images when user hovers over the images. That means Image on mouse hover then the Zoom effect Will come . |
| Zoom Effect in CSS |
so here we are using transform: scale(1.5);
<!Doctype html>
<html>
<head>
<title> Zoom Effect </title>
<style>
body{
height: 100vh;
display:flex;
justify-content:center;
align-items:center;
background: #5d6e73;
}
div{
height : 300px;
width:500px;
border: 10px solid #fff;
overflow:hidden;
}
img{
height:100%;
width:100%;
transition: all 1s;
}
img:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
</body>
</html>
No comments:
Post a Comment