<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="" content="">
<title></title>
<style type="text/css" media="all">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: black;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
max-width: 100vw;
overflow: hidden;
}
.main{
position: relative;
height: 50vw;
width: 50vw;
border: 2px solid blue;
border-radius: 10px;
}
.main:hover>div{
transform: scale(0);
transition-duration: 1s;
}
.main:hover>img{
transform:translateY(-50%) scale(2) translateY(0);
transition-duration: 2s;
}
.upper{
height: 100%;
width: 100%;
position: absolute;
z-index: 2;
background: aqua;
bottom: 0;
border-radius: 10px;
backdrop-filter: blur(5px);
display: grid;
place-items: center;
transition-duration: 2s;
}
h2{
background: aqua;
border-radius: 10px;
padding: 4px;
}
img{
height: 100%;
border-radius: 10px;
width: 100%;
transition-duration: 2s;
}
@keyframes ani1{
50%{
transform: translateY(100%);
}
100%{
transform: translateY(0%);
}
}
</style>
</head>
<body>
<div class="main">
<div class="upper">
<h2>Subscribe</h2>
<p>click on bell icon</p>
</div>
<img src="cartoon.jpg" alt="" />
</div>
</body>
</html>
Comments
Post a Comment