Image Hover Effect

Home / Web Code Snippet / Image Hover Effect

Image Hover Effect

https://youtube.com/shorts/XNCqz6wh-ho?si=XKp01xTkZMd1w0DW

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
<div class="container">
    <img class="img1" src="https://media.istockphoto.com/id/1191534503/photo/bengal-tiger-on-a-tree-wildlife-shot.jpg?s=612x612&w=0&k=20&c=HbUvRch6syunqv0mBEZzwZb9feN15_vUwvXZItMJYvs=" />
      <img class="img2" src="https://media.istockphoto.com/id/1191534503/photo/bengal-tiger-on-a-tree-wildlife-shot.jpg?s=612x612&w=0&k=20&c=HbUvRch6syunqv0mBEZzwZb9feN15_vUwvXZItMJYvs=" />
      <img class="img3" src="https://media.istockphoto.com/id/1191534503/photo/bengal-tiger-on-a-tree-wildlife-shot.jpg?s=612x612&w=0&k=20&c=HbUvRch6syunqv0mBEZzwZb9feN15_vUwvXZItMJYvs=" />
      <img class="img4" src="https://media.istockphoto.com/id/1191534503/photo/bengal-tiger-on-a-tree-wildlife-shot.jpg?s=612x612&w=0&k=20&c=HbUvRch6syunqv0mBEZzwZb9feN15_vUwvXZItMJYvs=" />
</div>
</body>
</html>

CSS CODE:-

body{
            padding: 0px;
            margin: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: black;
        }
        .container{
            position: relative;
              width: 300px;
              height: 300px;
        }
        .container img{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
        }
        .img1 {
              clip-path: polygon(0 0, 0 32%, 28% 0);
              transform: translate(-20px, -20px);
              transition:1s;
          }
        .container:hover .img1{
            transform: translate(0,0);
          }
        .img2{
              clip-path: polygon(28% 0, 0 32%, 0 100%, 17% 100%, 90% 0);
              transform: translate(-40px, 10px);
             transition:1s;
          }
        .container:hover .img2{
            transform: translate(0,0);
          }
        .img3{
              clip-path: polygon(100% 0, 100% 65%, 74% 100%, 17% 100%, 90% 0);
              transform: translate(-15px, -10px);
            transition:1s;
          }
        .container:hover .img3{
            transform: translate(0,0);
          }
        .img4{
              clip-path: polygon(100% 65%, 74% 100%, 100% 100%);
              transform: translate(-22px, 5px);
              transition:1s;
        }
        .container:hover .img4{
            transform: translate(0,0);
          }