Introduction of Profile card hover effect
Today you will see profile card hover effect, which is a contact card with a hovering effect, by following the simple code of HTML and Tailwind CSS step by step to understand it clearly. In this card, there will be three cards in which there will be images of a person, their name, and their occupation in the company. These details will be those of that person to whom you can contact. When the user hovers on one particular card. The email- ID of that person will be shown with some transition effect.
Now let’s start making this hovering card together without wasting our time by just doing the code . You can chooose any text editor but my recommendation is VS Code because it makes our code little bit easy. This is going to be a very helpful project, as almost every developer needs. This kind of contact page on their website, so you can either directly use it by copying it or you can make your own projects by taking ideas from us, like how we made this card.
HTML
First, we will create the structure of the contact card with the help of HTML (HHyper Text Markup Language). This is used to make the structure of web page by writing their code. Their response will be shown on the Chrome page. In this, we will first give the title of the page in the title tag. Then move toward the main body. We will make a parent div in which all the content of the contact card will be written. Three child divs for the three cards. In child divs, we will insert an image in the img tag. Write the name in the heading tag, and some information about that person. Their email ID will be hidden in the default case. At the end we will insert the most important tools for contact like twitter facebook and lnked.
<!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"> <script src="https://cdn.tailwindcss.com"></script> <script src="https://kit.fontawesome.com/0f01d8d2a0.js" crossorigin="anonymous"></script> <title>layakcoder</title> </head> <body> <div class="min-h-screen dark:bg-slate-800 gap-6 flex items-center justify-center bg-black"> <div class="bg-gray-100 dark:bg-gray-700 relative shadow-xl overflow-hidden hover:shadow-2xl group rounded-xl p-5 transition-all duration-500 transform hover:border-[3px] hover:border-red-500"> <div class="flex items-center gap-4"> <img src="https://images.pexels.com/photos/3934706/pexels-photo-3934706.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="w-32 group-hover:w-36 group-hover:h-36 h-32 object-center object-cover rounded-full transition-all duration-500 delay-500 transform" /> <div class="w-fit transition-all transform duration-500"> <h1 class="text-gray-600 dark:text-gray-200 font-bold"> Robin </h1> <p class="text-gray-400">Senior Developer</p> <a class="text-xs text-gray-500 dark:text-gray-200 group-hover:opacity-100 opacity-0 transform transition-all delay-300 duration-500"> robin@gmail.com </a> </div> </div> <div class="absolute group-hover:bottom-1 delay-300 -bottom-16 transition-all duration-500 dark:bg-gray-100 right-1 rounded-lg"> <div class="flex justify-evenly items-center gap-2 p-1 text-2xl text-white dark:text-gray-600"> <svg viewBox="0 0 1024 1024" fill="currentColor" height="30px" width="30px" class="text-black "> <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm215.3 337.7c.3 4.7.3 9.6.3 14.4 0 146.8-111.8 315.9-316.1 315.9-63 0-121.4-18.3-170.6-49.8 9 1 17.6 1.4 26.8 1.4 52 0 99.8-17.6 137.9-47.4-48.8-1-89.8-33-103.8-77 17.1 2.5 32.5 2.5 50.1-2a111 111 0 01-88.9-109v-1.4c14.7 8.3 32 13.4 50.1 14.1a111.13 111.13 0 01-49.5-92.4c0-20.7 5.4-39.6 15.1-56a315.28 315.28 0 00229 116.1C492 353.1 548.4 292 616.2 292c32 0 60.8 13.4 81.1 35 25.1-4.7 49.1-14.1 70.5-26.7-8.3 25.7-25.7 47.4-48.8 61.1 22.4-2.4 44-8.6 64-17.3-15.1 22.2-34 41.9-55.7 57.6z" /> </svg> <svg fill="currentColor" viewBox="0 0 16 16" height="1em" width="1em" class="text-black "> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" /> </svg> <svg viewBox="0 0 960 1000" fill="currentColor" height="1em" width="1em" class="text-black "> <path d="M480 20c133.333 0 246.667 46.667 340 140s140 206.667 140 340c0 132-46.667 245-140 339S613.333 980 480 980c-132 0-245-47-339-141S0 632 0 500c0-133.333 47-246.667 141-340S348 20 480 20M362 698V386h-96v312h96m-48-352c34.667 0 52-16 52-48s-17.333-48-52-48c-14.667 0-27 4.667-37 14s-15 20.667-15 34c0 32 17.333 48 52 48m404 352V514c0-44-10.333-77.667-31-101s-47.667-35-81-35c-44 0-76 16.667-96 50h-2l-6-42h-84c1.333 18.667 2 52 2 100v212h98V518c0-12 1.333-20 4-24 8-25.333 24.667-38 50-38 32 0 48 22.667 48 68v174h98" /> </svg> </div> </div> </div> <div class="bg-gray-100 dark:bg-gray-700 relative shadow-xl overflow-hidden hover:shadow-2xl group rounded-xl p-5 transition-all duration-500 transform hover:border-[3px] hover:border-red-500"> <div class="flex items-center gap-4"> <img src="https://images.pexels.com/photos/6774173/pexels-photo-6774173.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" class="w-32 group-hover:w-36 group-hover:h-36 h-32 object-center object-cover rounded-full transition-all duration-500 delay-500 transform" /> <div class="w-fit transition-all transform duration-500"> <h1 class="text-gray-600 dark:text-gray-200 font-bold"> David Goggins </h1> <p class="text-gray-400">Senior Developer</p> <a class="text-xs text-gray-500 dark:text-gray-200 group-hover:opacity-100 opacity-0 transform transition-all delay-300 duration-500"> david@gmail.com </a> </div> </div> <div class="absolute group-hover:bottom-1 delay-300 -bottom-16 transition-all duration-500 dark:bg-gray-100 right-1 rounded-lg"> <div class="flex justify-evenly items-center gap-2 p-1 text-2xl text-white dark:text-gray-600"> <svg viewBox="0 0 1024 1024" fill="currentColor" height="30px" width="30px" class="text-black "> <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm215.3 337.7c.3 4.7.3 9.6.3 14.4 0 146.8-111.8 315.9-316.1 315.9-63 0-121.4-18.3-170.6-49.8 9 1 17.6 1.4 26.8 1.4 52 0 99.8-17.6 137.9-47.4-48.8-1-89.8-33-103.8-77 17.1 2.5 32.5 2.5 50.1-2a111 111 0 01-88.9-109v-1.4c14.7 8.3 32 13.4 50.1 14.1a111.13 111.13 0 01-49.5-92.4c0-20.7 5.4-39.6 15.1-56a315.28 315.28 0 00229 116.1C492 353.1 548.4 292 616.2 292c32 0 60.8 13.4 81.1 35 25.1-4.7 49.1-14.1 70.5-26.7-8.3 25.7-25.7 47.4-48.8 61.1 22.4-2.4 44-8.6 64-17.3-15.1 22.2-34 41.9-55.7 57.6z" /> </svg> <svg fill="currentColor" viewBox="0 0 16 16" height="1em" width="1em" class="text-black "> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" /> </svg> <svg viewBox="0 0 960 1000" fill="currentColor" height="1em" width="1em" class="text-black "> <path d="M480 20c133.333 0 246.667 46.667 340 140s140 206.667 140 340c0 132-46.667 245-140 339S613.333 980 480 980c-132 0-245-47-339-141S0 632 0 500c0-133.333 47-246.667 141-340S348 20 480 20M362 698V386h-96v312h96m-48-352c34.667 0 52-16 52-48s-17.333-48-52-48c-14.667 0-27 4.667-37 14s-15 20.667-15 34c0 32 17.333 48 52 48m404 352V514c0-44-10.333-77.667-31-101s-47.667-35-81-35c-44 0-76 16.667-96 50h-2l-6-42h-84c1.333 18.667 2 52 2 100v212h98V518c0-12 1.333-20 4-24 8-25.333 24.667-38 50-38 32 0 48 22.667 48 68v174h98" /> </svg> </div> </div> </div> <div class="bg-gray-100 dark:bg-gray-700 relative shadow-xl overflow-hidden hover:shadow-2xl group rounded-xl p-5 transition-all duration-500 transform hover:border-[3px] hover:border-red-500"> <div class="flex items-center gap-4"> <img src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=600" class="w-32 group-hover:w-36 group-hover:h-36 h-32 object-center object-cover rounded-full transition-all duration-500 delay-500 transform" /> <div class="w-fit transition-all transform duration-500"> <h1 class="text-gray-600 dark:text-gray-200 font-bold "> Peter Dinklage </h1> <p class="text-gray-400">Junior Developer</p> <a class="text-xs text-gray-500 dark:text-gray-200 group-hover:opacity-100 opacity-0 transform transition-all delay-300 duration-500"> Peter@gmail.com </a> </div> </div> <div class="absolute group-hover:bottom-1 delay-300 -bottom-16 transition-all duration-500 dark:bg-gray-100 right-1 rounded-lg"> <div class="flex justify-evenly items-center gap-2 p-1 text-2xl text-white dark:text-gray-600"> <svg viewBox="0 0 1024 1024" fill="currentColor" height="30px" width="30px" class="text-black "> <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm215.3 337.7c.3 4.7.3 9.6.3 14.4 0 146.8-111.8 315.9-316.1 315.9-63 0-121.4-18.3-170.6-49.8 9 1 17.6 1.4 26.8 1.4 52 0 99.8-17.6 137.9-47.4-48.8-1-89.8-33-103.8-77 17.1 2.5 32.5 2.5 50.1-2a111 111 0 01-88.9-109v-1.4c14.7 8.3 32 13.4 50.1 14.1a111.13 111.13 0 01-49.5-92.4c0-20.7 5.4-39.6 15.1-56a315.28 315.28 0 00229 116.1C492 353.1 548.4 292 616.2 292c32 0 60.8 13.4 81.1 35 25.1-4.7 49.1-14.1 70.5-26.7-8.3 25.7-25.7 47.4-48.8 61.1 22.4-2.4 44-8.6 64-17.3-15.1 22.2-34 41.9-55.7 57.6z" /> </svg> <svg fill="currentColor" viewBox="0 0 16 16" height="1em" width="1em" class="text-black "> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" /> </svg> <svg viewBox="0 0 960 1000" fill="currentColor" height="1em" width="1em" class="text-black "> <path d="M480 20c133.333 0 246.667 46.667 340 140s140 206.667 140 340c0 132-46.667 245-140 339S613.333 980 480 980c-132 0-245-47-339-141S0 632 0 500c0-133.333 47-246.667 141-340S348 20 480 20M362 698V386h-96v312h96m-48-352c34.667 0 52-16 52-48s-17.333-48-52-48c-14.667 0-27 4.667-37 14s-15 20.667-15 34c0 32 17.333 48 52 48m404 352V514c0-44-10.333-77.667-31-101s-47.667-35-81-35c-44 0-76 16.667-96 50h-2l-6-42h-84c1.333 18.667 2 52 2 100v212h98V518c0-12 1.333-20 4-24 8-25.333 24.667-38 50-38 32 0 48 22.667 48 68v174h98" /> </svg> </div> </div> </div> </div> </body> </html>
Tailwind CSS
After making the structure of the contact card. We will now apply the style using Tailwind CSS (this is the framework of CSS used to design the webpage by just writing the CSS property in every tag by making classes). Using tailwind CSS instead of normal CSS because this is much easier than normal CSS. We can easily respond to the web page using tailwind. In this, we will first make the background gray.
@tailwind base; @tailwind components; @tailwind utilities;
Now, we will move toward the contact card, in which we will take it to the center of the screen, and then we will design the card, in which we will set the size and position of the card, give the appropriate image width, and also give styling to the text, like changing the text color and font size. Now we will hide the email ID and contact tools by default, and when the user hovers over one particular card, the email ID and contact tools will appear with some transition effect.
Output of Profile card hover effect
Finally, we have made the profile card hover effect by using the simple code of HTML and Tailwind CSS. If you still have any doubts about the code of this project, you can contact us through the contact details given in the footer of the web page. You can practice by making such mini-projects that will increase your practice. Here is below the button for downloading the source code that interested people can download.
For more explanation, click on the link given below to watch the video.
You can also check:
One Response
Wonderful work! This is the kind of info that
are supposed to be shared across the net. Shame on Google for now
nott positioning this submit upper!