Learn how to create a tooltip hover effect to preview images using Tailwind CSS. Follow our simple steps to add this interactive feature to your website.
Table of Contents
Want to make your website more interactive and engaging? Adding a tooltip hover effect that shows a preview image is a great way to do that. With Tailwind CSS, you can create this effect easily, without needing to write complicated code. In this guide, we'll show you step-by-step how to add a tooltip hover to preview images on your website. It's a simple way to improve the user experience and make your site stand out.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our tooltip hover effect.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here's an explanation of each part of the code:
1. <!doctype html>
- This is the document type declaration that tells the browser that the document is an HTML5 document.
2. <html lang="en">
- This tag defines the root of an HTML document. The lang="en" attribute specifies that the language of the document is English.
3. <head>
The <head> section contains metadata and links to external resources like CSS and JavaScript files.
<meta charset="UTF-8" />: Specifies the character encoding for the HTML document, ensuring it is displayed correctly across different browsers.<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Ensures the page is responsive by setting the viewport's width to match the device's width.<title>Tooltip Hover to Preview Image with Tailwind CSS</title>: Sets the title of the page, which appears in the browser's title bar or tab.<script src="https://cdn.tailwindcss.com"></script>: This script tag links to the Tailwind CSS CDN, enabling Tailwind's utility-first CSS framework for styling the page.<link rel="stylesheet" href="styles.css">: Links to an external stylesheet named styles.css for additional custom styles.
4. <body>
The <body> section contains the content of the page.
<ul>: Defines an unordered list. Inside this list is one<li>element representing a single list item.<li class="relative inline-block">: The list item is styled with Tailwind CSS classes relative (for positioning context) and inline-block (to make the list item an inline element but allow block-level properties).<a href="https://www.codewithfaraz.com/projects/web-development-projects-with-source-code" class="tooltip-trigger relative no-underline text-blue-700 hover:text-blue-500 font-semibold">: This is an anchor (<a>) tag that acts as a link. It has several Tailwind CSS classes:- tooltip-trigger: A custom class that could be used to trigger the tooltip.
- relative: Used for positioning the tooltip.
- no-underline: Removes the default underline from the link.
- text-blue-700: Colors the text blue.
- hover:text-blue-500: Changes the text color to a lighter blue on hover.
- font-semibold: Makes the text slightly bolder than normal.
- The text "Web Development Projects" appears as the link text.
<div class="tooltip-content hidden absolute z-40 bg-white p-2 rounded-lg shadow-lg">: This<div>contains the tooltip content (the image preview) and is styled with several Tailwind classes:- tooltip-content: A custom class for targeting this element.
- hidden: Initially hides the tooltip.
- absolute: Positions the tooltip absolutely relative to its nearest positioned ancestor.
- z-40: Sets the stacking order to ensure it appears above other content.
- bg-white: Sets the background color to white.
- p-2: Adds padding inside the tooltip.
- rounded-lg: Rounds the corners of the tooltip.
- shadow-lg: Adds a large shadow to the tooltip.
<img src="https://www.codewithfaraz.com/projects/web-development-projects-with-source-code.webp" alt="web development projects - Personal Portfolio Website">: This is an image tag that loads the preview image from the specified URL. The alt attribute provides alternative text describing the image, which is useful for accessibility and in case the image fails to load.
5. Closing Tags
- The
</a>,</li>,</ul>, and</body>tags close their respective elements, ensuring the document is well-structured and complete. The</html>tag ends the HTML document.
Step 2 (CSS Code):
Next, we need to style our tooltip hover effect by adding our CSS. This will give our tooltip hover effect an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
Lett's break it down step by step:
1. @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
- This line imports the "Inter" font family from Google Fonts, specifically the weights 400 (normal) and 600 (semi-bold). This font will be used throughout the webpage.
2. body { ... }
The body selector styles the entire page. Here's what each property does:
- font-family: 'Inter', sans-serif;: Sets the font of the entire page to "Inter", with "sans-serif" as a fallback.
- display: flex;: Applies a flexbox layout to the body, enabling easy alignment of child elements.
- justify-content: center;: Centers child elements horizontally within the viewport.
- align-items: center;: Centers child elements vertically within the viewport.
- height: 100vh;: Sets the height of the body to 100% of the viewport height, ensuring full-screen coverage.
- margin: 0;: Removes the default margin around the body to prevent any unwanted spacing.
- background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);: Sets the background of the body to a linear gradient, transitioning from a light color (#fdfbfb) at the top left to a slightly darker shade (#ebedee) at the bottom right.
3. .tooltip-content { ... }
This class is used to style the tooltip content, which is initially hidden and positioned relative to the triggering element:
- bottom: 100%;: Positions the tooltip directly above its triggering element.
- left: 50%;: Aligns the tooltip horizontally to the center of its triggering element.
- transform: translateX(-50%);: Further centers the tooltip horizontally by moving it left by 50% of its own width.
- margin-bottom: 10px;: Adds a small space between the tooltip and the triggering element.
- opacity: 0;: Initially sets the tooltip's opacity to 0, making it invisible.
- transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;: Smoothly animates the tooltip's opacity and position changes over 0.3 seconds.
4. .tooltip-content img { ... }
This styles the image inside the tooltip:
- max-width: 250px;: Limits the maximum width of the image to 250 pixels.
- height: auto;: Automatically adjusts the height to maintain the aspect ratio of the image.
- border-radius: 0.75rem;: Rounds the corners of the image by 0.75 rem units.
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);: Adds a subtle shadow to the image, giving it a lifted appearance.
- transform: scale(0.95);: Slightly scales down the image to 95% of its original size.
- transition: transform 0.3s ease-in-out;: Smoothly animates the scaling effect when the image is hovered over.
5. .tooltip-trigger:hover .tooltip-content { ... }
This CSS rule targets the .tooltip-content when its parent .tooltip-trigger is hovered over:
- display: block;: Ensures the tooltip content is displayed.
- opacity: 1;: Makes the tooltip fully visible by setting its opacity to 1.
- transform: translateX(-50%) translateY(-10px);: Moves the tooltip slightly upward by 10 pixels, adding a dynamic effect.
6. .tooltip-trigger:hover .tooltip-content img { ... }
This CSS rule applies to the image within the tooltip when the trigger is hovered over:
- transform: scale(1);: Returns the image to its original size, making it slightly larger than when it was initially scaled down.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
body {
font-family: 'Inter', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
}
.tooltip-content {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 10px;
opacity: 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.tooltip-content img {
max-width: 250px;
height: auto;
border-radius: 0.75rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transform: scale(0.95);
transition: transform 0.3s ease-in-out;
}
.tooltip-trigger:hover .tooltip-content {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(-10px);
}
.tooltip-trigger:hover .tooltip-content img {
transform: scale(1);
} Final Output:
See the Pen Show Image on Hover by Faraz (@codewithfaraz) on CodePen.
Conclusion:
Adding a tooltip hover effect to preview images using Tailwind CSS is a straightforward way to enhance your website. This feature makes your site more user-friendly and visually appealing. By following the easy steps outlined in this guide, you can implement this effect quickly. Tailwind CSS allows you to create professional-looking designs with minimal effort. Start using this tooltip hover effect today and see how it can make your website more interactive!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
