PURE HTML CSS Image Hover Effect



PURE HTML CSS Image Hover Effect

pure-html-css-image-hover-effect

HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
  
</head>

<body>
  <div class="s1">
  <div class="a1"></div>
  <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
  </div>
</body>
</html>

CSS Code

<style>
    @keyframes dd{
      from{
        width:100px; height:100px;
        z-index:10;
      }
      to{
        width:200px; height:200px;
        z-index:10;
      }
    }
      @keyframes dd1{
      from{
        width:100px; height:100px;top:0;
      left:100px;
        z-index:10;
      }
      to{
        width:200px; height:200px;
        z-index:10;left:0;top:0;
      }
    }
      @keyframes dd2{
      from{
        width:100px; height:100px;top:100px;
      left:0;
        z-index:10;
      }
      to{
        width:200px; height:200px;left:0;top:0;
        z-index:10;
      }
    }
      @keyframes dd3{
      from{
        width:100px; height:100px;top:100px;
      
      left:100px;
        z-index:10;
      }
      to{
        width:200px; height:200px;
        z-index:10;left:0;top:0;
      }
    }
    .s1{
      width:200px;
      height:200px;
      position:relative;
    }
    .a1{
      width:100px;
      height:100px;
      position:absolute;
      background-image:url("image1.jpg");
      top:0;
      left:0;
      background-size:100%;
    }
    .a1:hover{
      width:200px;
      height:200px;
      animation:dd 1s;
    }
    .a2:hover{
      width:200px;
      height:200px;
      animation:dd1 1s;
      left:0;
      top:0;
    }
    .a3:hover{
      width:200px;
      height:200px;
      animation:dd2 1s;
      left:0;
      top:0;
    }
    .a4:hover{
      width:200px;
      height:200px;
      animation:dd3 1s;
      left:0;
      top:0;
    }
    .a2{
      width:100px;
      height:100px;
      position:absolute;
      background-image:url("image2.jpg");
      top:0;
      left:100px;
      background-size:100%;
    }
    .a3{
      width:100px;
      height:100px;
      position:absolute;
      background-image:url("image1.jpg");
      top:100px;
      left:0;
      background-size:100%;
    }
    .a4{
      width:100px;
      height:100px;
      position:absolute;
      background-image:url("image4.jpg");
      top:100px;
      background-size:100%;
      left:100px;
    }