Adding Responsive Card Hover Effect in Blogger
Today, on this special occasion, our focus lies on creating a Responsive Card Hover Effect within the confines of Blogger. The allure of the Card Hover Effect lies in its sleek design against a white backdrop, ensuring it captivates your audience effortlessly.
But what exactly is the Card Hover Effect? It's an animation-packed feature that doesn't require user interaction to come to life. Picture this: a floating card rendered in a perspective view. As you hover over it, the effect seamlessly transitions the view from perspective to a frontal display, all while maintaining a stationary position. And that's just the tip of the iceberg. There's a plethora of possibilities awaiting exploration beyond this simple example.
This particular card hover effect, achievable solely through CSS, encompasses an expansion effect coupled with a color shift in its icon. The transformation observed here alters the icon's background from a gradient hue to a darker shade while reverting the icon's color to its original state. This kind of animation not only adds dynamism but also enables designers to uphold the website's theme color even amidst dynamically changing scenarios.
These card examples serve as an alternative to traditional navigation menus, especially when dealing with a limited number of navigation options. They efficiently utilize space while exuding a visually appealing layout. Additionally, they hold the key to more options through categorization, opening doors to enhanced user experience.
The advantages are myriad:
Express your services creatively.
Infuse a dynamic look into your blog.
Engage users with an attractive hover effect.
Streamline navigation for your audience.
Embark on a journey of new UI/UX design possibilities.
Refresh your website by swapping out the old card effect for this innovative one.
Now, let's delve into the steps!
Demo: How to Create a Responsive Card Hover Effect in Blogger?
Step 1: Log in to your Blogger Dashboard. You have the option to add this card effect within your posts or on your homepage.
Step 2: To incorporate this effect into your posts, create a new post or edit an existing one.
Step 3: For the homepage, navigate to Layout, click on 'Add a gadget,' and choose HTML/Javascript.
Step 4: Copy and paste the provided code below. Customize the text and title according to your preferences.
<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: Once you've followed all the steps, click on 'Save.'
This innovative Card Hover Effect can undoubtedly revamp your Blogger platform, offering a fresh and interactive dimension to your content presentation.