Follow us to get updates regarding Latest posts Follow Now!

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

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

how-to-make-a-responsive-card-hover-effect-in-blogger-


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

Getting Info...

About the Author

Student | Developer | Blogger

Post a Comment

Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.