Introduction
Today we will see how to make an amazing hovering card with a blur effect with the help of HTML and TailwindCSS. This is very useful, as you can use this card to show some details about you or your product with a hover effect. You will also see this type of card on many websites.
Let’s start making this together by writing some simple code. You’ll just need to follow our code carefully, step by step, to understand it properly. This will not be very complicated; both a beginner and an experienced guy can understand this project.
HTML
First, we will create the structure of this Hovering Card (Tailwind Css Testimonials) with the help of HTML. In this, we will first make a parent div in which all the images will be stored, then we will make some child divs for images in which there will be images in the img. tag, the name of the image in the heading tag, and at the end, we will also insert some paragraphs about the images in the p tag. We also have to add a button for the user, as when the user hovers, only that image can be seen properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="/dist/output.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://kit.fontawesome.com/0f01d8d2a0.js" crossorigin="anonymous"></script>
<title>LayakCoder</title>
</head>
<body class="font-normal bg-black text-white">
<div class="text-center py-10">
<h5 class="text-heading_color">Testimonials</h5>
<h1 class="text-4xl w-96 mx-auto leading-normal font-bold mb-12">Read What others Have to say</h1>
<div class="flex max-w-5xl mx-auto gap-8 group">
<div class="bg-white/10 group-hover:blur-sm hover:!blur-none p-8 rounded-xl cursor-pointer mix-blend-luminosity">
<img class="w-20 h-20 rounded-full mx-auto " src="https://images.pexels.com/photos/897059/pexels-photo-897059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
<h4 class="uppercase text-xl font-bold mt-2">Aman Kumar</h4>
<p class="text-sm leading-7 my-3 font-light opacity-50">Today we will see how to make an amazing hovering card with a blur effect with the help of HTML and TailwindCSS.
</p>
<button class="bg-purple-800 py-2.5 px-8 rounded-full">
Get in Touch
</button>
</div>
<div class="bg-white/10 group-hover:blur-sm hover:!blur-none p-8 rounded-xl mix-blend-luminosity cursor-pointer">
<img class="w-20 h-20 rounded-full mx-auto" src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
<h4 class="uppercase text-xl font-bold mt-2">Gopal Garg</h4>
<p class="text-sm leading-7 my-3 font-light opacity-50">Today we will see how to make an amazing hovering card with a blur effect with the help of HTML and TailwindCSS.
</p>
<button class="bg-purple-800 py-2.5 px-8 rounded-full">
Get in Touch
</button>
</div>
<div class="bg-white/10 group-hover:blur-sm hover:!blur-none p-8 rounded-xl mix-blend-luminosity cursor-pointer">
<img class="w-20 h-20 rounded-full mx-auto " src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
<h4 class="uppercase text-xl font-bold">Shivam Rajput</h4>
<p class="text-sm leading-7 my-3 font-light opacity-50">Today we will see how to make an amazing hovering card with a blur effect with the help of HTML and TailwindCSS.
</p>
<button class="bg-purple-800 py-2.5 px-8 rounded-full">
Get in Touch
</button>
</div>
</div>
</div>
</body>
</html>TailwindCss of Tailwind Css Testimonials
After making the structure of Hovering card now we will give it styling with the help of Tailwind(a framework of CSS use to design the websites or make it responsive).In this we will first give the background black by BG-color. Now we have to design the card in which first we will take it to the centre of the display and then give it display flex to take all the divs in one horizontal line.
We will now adjust the size and positions of the parent div and also the components of the div, like the image section, heading section, and paragraph. We will apply the hovering effect when the user hovers on that particular button of an image, and only that image will show clearly, while the rest of the images will remain blurred by using the n-th child property and the filter blur property.
@tailwind base; @tailwind components; @tailwind utilities;
Output of Hovering Card
Finally, we made the Hovering Card with the help of HTML and TailwindCss by following the simple code one by one. You can make such projects by taking ideas from us. If you want the source code, then click on the link given below to download Tailwind Css Testimonials.
For more explanation, click on the link given below to watch the video.
You can also check:
Press the download button to download the source code
