Wednesday, October 16

CSS Thanos Snap Dispersion On Hover Effects

CSS Thanos Snap Dispersion On Hover Effects with HTML and CSS. 

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Thanos Snap Dispersion On Hover Effects</title>
<link rel ="stylesheet" href ="style.css">
</head>
<body>
<div class="img-bx">
  <img src="woman.jpg">
  <img src="http://cdn.ad.moumou.co.kr/system/etc/noise.png">
</div>
</body>
</html>

CSS

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

Leave a Reply

Your email address will not be published. Required fields are marked *