We will be looking at a very simple card hover animation made using html and css only. If you are aware of css properties, you will understand this but if you are a total beginner I would recommend to learn the basics of CSS.
Step 1 : Writing our markup i.e., HTML
We need a parent wrapper and a child which contains some text content. It can be anything of your choice as long as it looks good.
<body>
<div class="parent">
<div class="child-text">
Hi there! Howdy? I am fine. Fun fact? I use vanilla css for most of my projects because I love it!!
</div>
</body>
Step 2 : We will add the basic resets and stylings to our body. Note that the code has been written in codepen so, there are no meta tags for the markup.
/* resets */
*,{
margin:0;
padding:0;
box-sizing:border-box;
}
/* styles for the body */
body{
height:100vh;
width:100vw;
overflow:hidden;
display:grid;
place-content:center;
background:#000000;
}
The body is displayed as grid, with its contents center. You can also use transform property or flexbox to center the wrapper div.
Step 3: Watch carefully how we design the parent div, which contains the child div. It has a random background image, you can use any image or color or gradient background of your choice.
The position is** relative**, it is very important, we will get to know!
Overflow **is **hidden. We hide our overflow as the child div will be moved in Y axis , towards the bottom.
.parent {
height:20rem;
width:20rem;
overflow:hidden;
position:relative;
border-radius:10px;
background:url('https://media.istockphoto.com/photos/clouds-on-sky-picture-id184103864?k=20&m=184103864&s=612x612&w=0&h=m1yaRvpLy-e76e6ZbX2QkCbsGFhubVaaDntDOpL2zYE=') no-repeat center/cover;
cursor:pointer;
text-align:center;
}
*Step 4 *: We will use a black overlay. This is because we want the text in the child div(transparent background) to have contrast with the overlay.
- For this we are using before pseudo class. This is going to have position as absolute and would have a background of black ( with very low opacity).
.parent::before{
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-1;
background:rgb(0,0,0,0.4);
}
Step 5 : Now, we style our child div, which is the hero for this card animation.
- This div can be styled anyhow, the only thing to remember is to have a **transform property **on it. It transforms this div in any direction explicitely. Here we have transformed it in -Y axis by 15rem.
/* the child container with the text */
.child-text{
margin-top:4rem;
font-size:1.5rem;
color:white;
text-shadow:1px 0 1px black;
padding:1rem;
transition:transform 500ms ;
transform:translateY(15rem);
cursor:pointer;
}
Step 6: We are almost done! All we have now is to position the child div correctly on hover over the parent div.
When the parent is hovered, the child will have its transform property of translate in y axis to 0. This makes the child pop up. To slow the effect down, we have used transition of 500ms.
.parent:hover .child-text{
transform:translateY(0rem);
}
Step 7 : Before we are ready with the card, lets add some coolness to our parent div. We have added drop shadow and box shadow, you can also use borders, or new background color.
.parent:hover{
border-radius:10px;
box-shadow:0 0 10px white;
filter:drop-shadow(0 1px 2px black);
transform:scale(0.98);
}
Step 8: We have finished our card. Wow, that was a lot wasn't it? 😅 The only way to become good at it, is by practising. Try experimenting with this code and you will be amazed how you can make some sleek animations with little bit of change here and there!
I hope I could teach you something new and useful. If you are reading this, make sure to share it with your friends who are new to CSS and needs help with their beautiful projects. Happy CSS'ing!! ❤
Top comments (0)