Card Blur Hover Effect

Introduction:

In this blog post, Our team will be guide you to creating a card blur hover effect using html and css. In that Image, Showing 3 cards that is "coding" (change as per your need). In that, cursor move the first or any other card that card shown for the user but other two cards will be blur automatically. Using HTML and CSS this content will be developed and solve that problem.

Things you will learn:

By following this tutorial, you'll gain insights into the following key aspects:

Setting up a basic HTML structure for the Card Blur Hover Effect.
Styling the Card effect using CSS, Including responsiveness.

Video Tutorial:

To complement this written guide, we've prepared a video tutorial that visually demonstrates each step of the process. Watch the tutorial to see the code in action and gain a deeper understanding of the concepts covered.

File Structure:

In that, You can create the one Folder that is "responsive-navigation-bar" in that folder, create 2 different file that is:

1. index.html
2. style.css

after creating 2 file firstly call the "style.css" into "index.html"
like "<link rel="stylesheet" href="css/style.css" />" then after start the working on that project. In give below, Our team providing source code that can you use for you personal projects.

HTML:

<!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"> <link rel="stylesheet" href="style.css"> <title>Card Blur Hover Effect using HTML and CSS</title> </head> <body> <div class="titlebar"> <h1>Card Blur Hover Effect</h1> </div> <div class="container"> <div class="card"> <div class="circle"> <img src="img1.jpg" alt="Coding"> </div> <div class="content"> <h2>Coding</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim deleniti assumenda saepe pariatur necessitatibus blanditiis est, nobis dolor nisi aliquam</p> <a href="#">Read Mode</a> </div> </div> <div class="card"> <div class="circle"> <img src="img2.jpg" alt="Coding"> </div> <div class="content"> <h2>Coding</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim deleniti assumenda saepe pariatur necessitatibus blanditiis est, nobis dolor nisi aliquam</p> <a href="#">Read Mode</a> </div> </div> <div class="card"> <div class="circle"> <img src="img3.jpg" alt="Coding"> </div> <div class="content"> <h2>Coding</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim deleniti assumenda saepe pariatur necessitatibus blanditiis est, nobis dolor nisi aliquam</p> <a href="#">Read Mode</a> </div> </div> </div> </body> </html>

CSS
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ min-height: 100vh; background: linear-gradient(45deg, #00ffff, #0230ff); background-attachment: fixed; } .titlebar{ margin: 10px; padding: 10px; text-align: center; color: #fff; letter-spacing: 2px; } .titlebar h2{ font-family: 'Poppins', sans-serif; font-size: 25px; text-transform: uppercase; } .container{ display: flex; justify-content: center; align-items: center; position: relative; width: 1500px; padding: 20px; flex-wrap: wrap; } .container .card{ position: relative; width: 300px; height: 500px; background: #fff; margin: 20px; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 25px rgba(0,0,0,0.2); transition: 0.5s; } .container:hover .card{ filter: blur(10px); transform: scale(0.9); opacity: 0.5; } .container .card:hover{ filter: blur(0px); transform: scale(1.1); opacity: 1; } .container .card .circle{ position: relative; text-align: center; } .container .card .circle img{ width: 200px; padding: 10px; margin: 10px; box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2); border-top-right-radius: 20%; border-bottom-left-radius: 20%; border: 2px solid #000; } .container .card .content{ position: absolute; bottom: 10px; padding: 20px; text-align: center; } .container .card .content p{ color: #666; } .container .card .content a{ position: relative; display: inline-block; padding: 10px 20px; background: #4070f4; color: #fff; border-radius: 20px; text-decoration: none; margin-top: 20px; } @media (max-width: 768px){ .container{ width: 100%; } }

Conclusion

In conclusion, creating a Card Blur Hover Effect is an essential skill for web developers. It not only improves user experience but also contributes to the overall aesthetics of a website.

Search This Blog

SuperCodingBits

Strategies for Writing an Effective Developer Resume