Thanos Magic Effect on Image on HTML & CSS Only

In this article i will show you how to use thanos Snap Effect on a image easyly.
SOURCE CODE========

Thanos Effect: HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Image Hover Thanos Effect</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="imgbox">
    <img src="lg2.png" alt="Image">
    <img src="bg.png" alt="background">
  </div>
</body>
</html>

Thanos Effect: CSS CODE

body{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}
.imgbox{
  position: relative;
  width: 400px;
  height: 400px;
}
.imgbox img:nth-child(1){
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  transform-origin: left;
}
.imgbox:hover img:nth-child(1){
  transition: 4s;
  transition-delay: 1s;
  transform: translateX(50px);
  opacity: 0;
  filter: blur(10px);
}
.imgbox img:nth-child(2){
  width: 1200px;
  height: 400px;
  transform: translateX(400px) scaleX(0);
  transform-origin: left;
}
.imgbox:hover img:nth-child(2){
  transition: 8s;
  transform: translateX(-400px) scaleX(1);
}

Thanks For visit my website………….

LEAVE A REPLY

Please enter your comment!
Please enter your name here