DEV Community

Suman Roy
Suman Roy

Posted on

A Simple Card hover animation for beginners

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

*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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}

Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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)