How to make a Responsive Card Hover Effect in blogger Website

Card Hover Effect

While doing so the icon takes the original background color. With this card hover, animation designers can maintain the theme color of the website even in dynamic situations.

Such card examples are an alternative to the navigation menu. When there’s less number of navigation option then designers can go for this one. This is because it makes the full utilization of the space while getting a beautiful layout. Alternatively, the hold the key to more options by categorization.

Pros

1. Express your services 
2. Dynamic look to your blog
3. Attractive hover effect
4. Navigate your users 
5. New Ui/Ux design
6. Change your old Card effect to this new one

Let's Do a Demo Here...! 

View Demo

How to make a Responsive Card Hover Effect in blogger 

You can add this card in Posts or Homepage

Step 1: Login to your   Blogger Dashboard.

Step 2: To add this posts, Go and create a new post or Edit a post

Step 3: To add this in Homepage,  Go to Layout and then Click on Add a gadget and choose HTML/Javascript 

Step 4: Now copy and paste the codes given below 

Edit the text and title according to you

<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>Card One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, placeat ea odio illo laudantium assumenda laborum aspernatur, necessitatibus vel, possimus et.</p>
<a href="#">read more</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>02</h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, placeat ea odio illo laudantium assumenda laborum aspernatur, necessitatibus vel, possimus et.</p>
<a href="#">read more</a>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>03</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, placeat ea odio illo laudantium assumenda laborum aspernatur, necessitatibus vel, possimus et.</p>
<a href="#">read more</a>
</div>
</div>
</div>
</div>
<style>
.container{display:flex;justify-content:center;align-items:center;max-width:1200px;flex-wrap:wrap;padding:40px 0}.container .card{position:relative;width:320px;height:440px;box-shadow:inset 5px 5px 5px rgba(0,0,0,0.05),inset -5px -5px 5px rgba(255,255,255,0.05),5px 5px 5px rgba(0,0,0,0.05),-5px -5px 5px rgba(255,255,255,0.05);border-radius:15px;margin:30px}.container .card .box{position:absolute;top:20px;left:20px;right:20px;bottom:20px;background:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.1);border-radius:15px;display:flex;justify-content:center;align-items:center;transition:0.5s}.container .card:hover .box{transform:translateY(-50px);box-shadow:0 10px 40px rgba(0,0,0,0.3);background:linear-gradient(45deg,#f747f2,#4f29cd)}.container .card .box .content{padding:20px;text-align:center}.container .card .box .content h2{position:absolute;top:-10px;right:30px;font-size:8em;color:rgba(0,0,0,0.02);transition:0.5s;pointer-events:none}.container .card:hover .box .content h2{color:rgba(0,0,0,0.05)}.container .card .box .content h3{color:#777;font-size:1.8em;z-index:1;transition:0.5s;pointer-events:none}.container .card .box .content p{font-size:1em;font-weight:300;color:#777;z-index:1;transition:0.5s;pointer-events:none}.container .card:hover .box .content h3,.container .card:hover .box .content p{color:#fff}.container .card .box .content a{position:relative;display:inline-block;padding:8px 20px;background:#03a9f4;margin-top:15px;border-radius:20px;color:#fff;text-decoration:none;font-weight:400;box-shadow:0 10px 20px rgba(0,0,0,0.2)}.container .card:hover .box .content a{background:#ff568f}
</style>

Step 5: Now click on save if you followed all!

Conclusion

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ