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

Popular Posts