DEV Community

Cover image for Amazing Card Fill Hover Using HTML & CSS
Nikhil Bobade
Nikhil Bobade

Posted on • Edited on

14 3

Amazing Card Fill Hover Using HTML & CSS

Hello Guys,

Today I created a Amazing Card Fill Hover Using HTML & CSS. In this card I am using only HTML and CSS for hover animation.

Checkout recent post :

 <div class="row">
        <div class="card">
            <h4>What is a Frontend Develoment?</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam porro similique aliquid debitis ipsam soluta dolorum ipsa! Voluptate, suscipit iure.</p>
        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

This is a simple html I am using for card. For hover effect I am using card::before tag for position and after hover I only scale the .card:hover::before property.

@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #343a40;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  user-select: none;
}

.card {
  border-radius: 10px;
  filter: drop-shadow(0 5px 10px 0 #ffffff);
  width: 400px;
  height: 180px;
  background-color: #ffffff;
  padding: 20px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: 0.6s ease-in;
}

.card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -15px;
  right: -15px;
  background: #7952b3;
  height:220px;
  width: 25px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-out;
}

.card:hover::before{
    transition-delay:0.2s ;

  transform: scale(40);
}

.card:hover{
    color: #ffffff;

}

.card p{
    padding: 10px 0;
}
Enter fullscreen mode Exit fullscreen mode

If you find this useful in a post like and save this post also comments about your thoughts and new ideas for post.

For more content follow me on Instagram @developer_nikhil27.

Thank you!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (3)

Collapse
 
rajeshkumaryadavdotcom profile image
Rajesh Kumar Yadav

Oh wow, will use this in my project - thank you :)

Collapse
 
rajeshkumaryadavdotcom profile image
Rajesh Kumar Yadav • Edited

Implemented this now at RajeshKumarYadav.com - thank you :)
Image

Collapse
 
nikhil27b profile image
Nikhil Bobade

Thank you I like that keep going also Follow me on Instagram for more content

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up