How to make a Responsive Card Hover Effect in blogger

In this post I made a tutorial on How to make a Responsive Card Hover Effect in blogger, Card Hover Effect consists full of animations

Hello Everyone! Welcome back to Techy Darshan, Today on this occasion our tutorial is How to make a Responsive Card Hover Effect in blogger,  Card Hover Effect possesses a cool design with a white background definitely it doesn't disappoint you.

Card Hover Effect ?

Card Hover Effect  consists full of animation so that without even any interactivity we can get the animation. 

That is present in the form of a floating card which is in perspective view. Hover effect causes the view to shift from perspective to front view while standing still. There’s plenty more you can do after that just like the example that we have here.

Here’s one of the simplest card hover effects that you can achieve with just CSS. It includes expansion effect along with a change in icon color. The one we have here changes the icon background from gradient to dark.

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 Begin!

Demo

How to make a Responsive Card Hover Effect in blogger ?

Step 1: Login to your Blogger Dashboard

You can add this card in Posts or Homepage

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

In this post I made a tutorial on How to make a Responsive Card Hover Effect in blogger, Card Hover Effect  consists full of animation so that without even any interactivity we can get the animation. I hope you have liked it and please do share with your friends and follow up our blog for more.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Techy DarshaN | All Rights Reserved 

 © Copyright https://www.techydarshan.eu.org