Introduction of Icon Show on Hover
Here you will see a Icon Show on Hover flip card (Hover Image hange) with a hovering effect made by HTML and Tailwind CSS. In this flip card, an image will be shown in default case, and when the user hovers on the image, the image will change and something will be written about the image. You can add anything to the images, or you can add anything according to you.
Let’s start making this Change Image on Hover Tailwind together with the help of HTML and Tailwind by following the simple code that is not very complex and easy to understand. You just need to know the basics of Tailwind to understand this code.
HTML
First, we will create the structure of this Change Image on Hover Tailwind in an HTML file. In this card, first we have to make a parent div in which all the content of the card will be contained. Then we will set two images, one of which will be hidden using Tailwind, and then there will be a button, and at the end there will be three logos for like, comment, and share.
<!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>Hover Image change | layakcoder</title>
</head>
<body class="bg-black flex justify-center items-center h-screen">
<div class="relative cursor-pointer shadow-lg group overflow-hidden ">
<img
class="h-96 w-60 duration-500 group-hover:opacity-0 rounded-xl"
src="https://pm1.aminoapps.com/7218/beb7b008ee7844b4b3a71c490aca8fc3e69b4a5dr1-736-874v2_uhq.jpg"
alt=""
/>
<img
class="h-96 w-60 absolute top-0 z-[-1] rounded-xl"
src="https://i.pinimg.com/originals/ea/fd/16/eafd1603d0937a7fe51208013cc84eb2.jpg"
alt=""
/>
<button
class="group-hover:bottom-14 duration-700 absolute px-5 py-2 bg-white text-lg font-semibold rounded hover:bg-black hover:text-white left-1/4 bottom-[-65px]"
>
Click Me
</button>
<svg
class="absolute duration-500 right-[-60px] top-5 group-hover:right-2 delay-100 bg-white p-2 rounded-full"
width="40px"
height="40px"
viewBox="0 0 24 24"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
>
<g transform="translate(0 -1028.4)">
<path
d="m7 1031.4c-1.5355 0-3.0784 0.5-4.25 1.7-2.3431 2.4-2.2788 6.1 0 8.5l9.25 9.8 9.25-9.8c2.279-2.4 2.343-6.1 0-8.5-2.343-2.3-6.157-2.3-8.5 0l-0.75 0.8-0.75-0.8c-1.172-1.2-2.7145-1.7-4.25-1.7z"
fill="#e74c3c"
/>
</g>
</svg>
<svg
class="absolute duration-500 right-[-60px] top-[80px] group-hover:right-2 delay-300 rounded-full p-2 bg-white"
fill="#000000"
width="40px"
height="40px"
viewBox="0 0 24 24"
id="bookmark"
data-name="Flat Color"
xmlns="http://www.w3.org/2000/svg"
class="icon flat-color"
>
<path
id="primary"
d="M18,2H6A2,2,0,0,0,4,4V21a1,1,0,0,0,.5.86,1,1,0,0,0,1,0L12,18.15l6.5,3.72A1,1,0,0,0,19,22a.9.9,0,0,0,.5-.14A1,1,0,0,0,20,21V4A2,2,0,0,0,18,2Z"
style="fill: rgb(0, 0, 0)"
></path>
</svg>
<svg
class="absolute duration-500 right-[-60px] top-[140px] group-hover:right-2 delay-500 rounded-full p-2 bg-white"
width="40px"
height="40px"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
fill="none"
>
<path
fill="#000000"
stroke="#000000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m20 12-6.4-7v3.5C10.4 8.5 4 10.6 4 19c0-1.167 1.92-3.5 9.6-3.5V19l6.4-7z"
/>
</svg>
</div>
</body>
</html>
Tailwind
After making the structure of the Change Image on Hover Tailwind, we will now make it work like a real flip card with a transition effect using Tailwind (a framework of CSS used to design and responsively design the website). In this first we will make the background dark and take the card in centre of screen. Now we will design the card, in which first we have to adjust the size and position of the card and then the images. In the the images. In the images, the first image will be shown in default case, and when the user hovers on the card, the opacity of the first image will be zero and that of the second image will be 1, and with the second image button, those three logos will also appear with some transition effect.
@tailwind base; @tailwind components; @tailwind utilities;
Output of Icon Show on Hover
Now, finally, we made the Icon Show on Hover (Hover Image Change) flip card with the hovering effect with the help of HTML and Tailwind by following the simple code step by step. You can make this type of project for your practice to gain more knowledge, or you can add it to your project list for your resume. If you want the source code, then click on the link given below to download the code.
For more explanation, click on the link given below to watch the video and
Press the download button to download the source code
