In this tutorial we will build Slide Up Animation Using HTML & CSS. You will learn about modern CSS including CSS grid, flexbox and responsive media queries.
Hello Viewers, today in this tutorial, you’ll learn Slide Up Animation Using HTML & CSS.
This Post is about making a Slide Up Animation Using HTML & CSS.
To create this project (Slide Up Animation Using HTML & CSS). First, you need to create two Files one HTML File and one is CSS File.
First, create an HTML file with the name of index.html and paste the code given in HTML file.
<!DOCTYPE html>
<!-- Created by Amit Tutorial - www.amittutorial.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide Up Animation using HTML & CSS | Amit Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="hid-box">
<h1>CSS3 slide up</h1>
<p>This is a quick demo of slide-up effect using CSS animation
when hover the box. No JS required!</p>
</div>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the code given in CSS file.
body{
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
margin: 0
}
.box {
height: 200px;
width: 300px;
border-radius: 10px;
overflow: hidden;
border: 1px solid #333333;
background: #555555;
}
.hid-box {
top: 100%;
position: relative;
transition: all .3s ease-out;
background: orangered;
height: 100%;
padding: 7px;
color: white;
text-align: center;
border-radius: 10px;
}
.box:hover > .hid-box{
top: 0;
}
Download Source Code:
