Zoom on Hover
HTML :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hover by Growcode</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image">
<img src="https://iphoneswallpapers.com/wp-content/uploads/2020/02/Audi-Car-HD-iPhone-Wallpaper.jpg" width="300" height="148" />
</div>
</body>
</html>
CSS :
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: black;
}
.image {
position: relative;
margin: auto;
overflow: hidden;
width: 300px;
}
.image img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
}
.image:hover img {
transform: scale(2);
}
Comments
Post a Comment