Card With Hover Effect | html css card hover effect - complete code


Card With Hover Effect | HTML css card hover effect - complete code

Card With Hover Effect | html css card hover effect - complete code




Welcome🎉 to Code With Random blog. In this blog, we learn that how to create a Card With Hover Effect. We use HTML & CSS  for this Card With Hover Effect. Hope you enjoy our blog so let's start with a basic HTML structure for Card With Hover Effect.

HTML code for card

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Card With Hover Effect</title>  
   <link rel="stylesheet" href="style.css">  
 </head>  
 <body>  
   <div class="card">  
     <div class="content">  
       <h1>Hello</h1>  
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, necessitatibus?</p>  
     </div>  
   </div>  
 </body>  
 </html>  
There is all HTML code for the Card hover effect. Now, you can see output without CSS, then we write CSS for our Card hover effect.
Output

 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');  
 *{  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
   font-family: 'Poppins', sans-serif;  
 }  
 body{  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   height: 100vh;  
 }  
 .card{  
   width: 250px;  
   height: 300px;  
   position: relative;  
   cursor: pointer;  
 }  
 .card .content{  
   width: 100%;  
   height: 100%;  
   background: rgba(255, 255, 255, 0.089);  
   backdrop-filter: blur(20px);  
   border: 1px solid white;  
   color: white;  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   flex-direction: column;  
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.055);  
   transition: all .4s;  
 }  
 .card .content p{  
   font-size: 0.8em;  
   padding: 0.3em 1.5em;  
   text-align: center;  
 }  
 .card:hover .content{  
   color: rgb(36, 36, 36);  
 }  
 .card::before,  
 .card::after{  
   content: '';  
   position: absolute;  
   width: 100%;  
   height: 50%;  
   background: #7F00FF;  
   z-index: -20;  
   transition: all .4s;  
 }  
 .card::before{  
   top: 0;  
   right: 0;  
 }  
 .card::after{  
   bottom: 0;  
   left: 0;  
   background: #E100FF;  
 }  
 .card:hover::before{  
   width: 50px;  
   height: 50px;  
   transform: translate(20px, -20px);  
   border-radius: 50%;  
 }  
 .card:hover::after{  
   width: 100px;  
   height: 100px;  
   transform: translate(-20px, 20px);  
   border-radius: 50%;  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Output




Card With Hover Effect | html css card hover effect - complete code

Card With Hover Effect | html css card hover effect - complete code

Check it more








Now we have completed our CSS section,  Here is our updated output with  CSSHope you like Card With Hover Effect, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Card With Hover Effect using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

1 Comments

  1. Bro how to do this of background color of body is different(pink in my case)

    ReplyDelete

Post a Comment

Previous Post Next Post