After Before in Html Css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="AfterBefore.css">
</head>
<body>
<div class="slideleft">
<p>Slide From Left</p>
</div>
<div class="slideright">
<p>Slide From right</p>
</div>
<div class="slidetop">
<p>Slide From top</p>
</div>
<div class="slidebottom">
<p>Slide From bottom</p>
</div>
<div class="sizeincrease">
<p>Size Increasing</p>
</div>
<div class="sizecircle">
<p>Size circle</p>
</div>
<div class="size360">
<p>Size 360</p>
</div>
<div class="skewscale">
<p>Size skewscale</p>
</div>
</body>
</html>
css code
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.slideleft{
height: 15vh;
width: 20vw;
float: left;
border: 1px solid black;
margin: 20px;
background-color: skyblue;
position: relative;
z-index: 1;
overflow: hidden;
}
.slideleft p{
margin: 30px;
font-size: 30px;
}
.slideleft::after{
content: '';
z-index: -1;
font-weight: 900;
height: 100%;
width: 100%;
background-color: red;
position: absolute;
top: 0;
left: -100%;
transition-duration: 1s;
}
.slideleft:hover::after{
left: 0;
transition-duration: 1s;
}
.slideright{
width: 20vw;
height: 15vh;
border: 1px solid black;
float: left;
background-color:skyblue;
z-index: 1;
position: relative;
margin: 20px;
overflow: hidden;
}
.slideright p{
margin: 30px;
font-size: 30px;
}
.slideright::after{
content: '';
height: 100%;
position: absolute;
width: 100%;
background: red;
top: 0%;
right: -100%;
transition: 1s;
z-index: -1;
}
.slideright:hover::after{
right: 0%;
transition: 1s;
}
.slidetop{
width: 20vw;
height: 15vh;
border: 1px solid black;
background-color: skyblue;
overflow: hidden;
z-index: 1;
position: relative;
float: left;
margin: 20px;
}
.slidetop p{
font-size: 30px;
margin: 30px;
}
.slidetop::after{
content: '';
z-index: -1;
height: 100%;
width: 100%;
background-color: red;
position: absolute;
top: -100%;
transition-duration: 1s;
}
.slidetop:hover::after{
top: 0px;
transition-duration: 1s;
}
.slidebottom{
height: 15vh;
width: 20vw;
border: 1px solid black;
position: relative;
z-index: 1;
background-color: skyblue;
overflow: hidden;
float: left;
margin: 20px;
}
.slidebottom p{
margin: 30px;
font-size: 25px;
}
.slidebottom::after{
content: '';
width: 100%;
height: 100%;
z-index: -1;
background-color: red;
position: absolute;
bottom: -100%;
transition-duration: 1s;
}
.slidebottom:hover::after{
bottom: 0px;
transition-duration: 1s;
}
.sizeincrease{
width: 20vw;
height: 15vh;
margin: 20px;
overflow: hidden;
background-color: skyblue;
border: 1px solid black;
position: relative;
z-index: 1;
float: left;
}
.sizeincrease p{
font-size: 30px;
margin: 30px;
}
.sizeincrease::after{
content: '';
height: 100%;
width: 100%;
background: red;
z-index: -1;
position: absolute;
top: 0%;
transform: scale(0);
transition-duration: 1s;
}
.sizeincrease:hover::after{
transform: scale(1.00);
transition-duration: 1s;
}
.sizecircle{
width: 20vw;
height: 15vh;
border: 1px solid black;
z-index: 1;
position: relative;
background-color: skyblue;
margin: 20px;
float: left;
overflow: hidden;
}
.sizecircle p{
font-size: 30px;
margin: 30px;
}
.sizecircle::after{
content: '';
width: 100%;
height: 100%;
background-color: red;
position: absolute;
top: 0%;
z-index: -1;
transform: scale(0);
border-radius: 100%;
transition-duration: 0.5s;
}
.sizecircle:hover::after{
transform: scale(1.00);
border-radius: 0px;
transition-duration: 0.5s;
}
.size360{
width: 20vw;
height: 15vh;
border: 1px solid black;
background-color: skyblue;
float: left;
margin: 20px;
z-index: 1;
position: relative;
overflow: hidden;
}
.size360 p{
font-size: 30px;
margin: 30px;
}
.size360::after{
content: '';
width: 0%;
height: 100%;
z-index: -1;
background-color: red;
position: absolute;
top: 0%;
margin-left: 50%;
transition-duration: 1s;
/* transform: skew(0deg); */
}
.size360:hover::after{
transition-duration: 1s;
width: 100%;
margin-left: 0;
/* transform: scale(1.00); */
transform: rotate(360deg);
}
.skewscale{
width: 20vw;
height: 15vh;
border: 1px solid black;
background-color: skyblue;
float: left;
margin: 20px;
z-index: 1;
position: relative;
overflow: hidden;
}
.skewscale p{
margin: 30px;
font-size: 30px;
}
.skewscale::after{
content: '';
width: 100%;
height: 100%;
background-color: red;
position: absolute;
top: 0%;
z-index: -1;
transform: scale(0);
/* border-radius: 100%; */
transition-duration: 0.5s;
/* transform: skew(3); */
}
.skewscale:hover::after{
transition-duration: 0.5s;
transform: scale(1.20) skew(-20deg);
}
Comments
Post a Comment