Creating Text Pop-ups on Hover with CSS
Written on
Chapter 1: Introduction
Have you ever wanted a text bubble to show up when hovering over an image, like a tree in your workspace? While updating my personal portfolio, I faced this challenge and discovered a straightforward solution. In this guide, we'll walk through the steps to achieve this effect using CSS.
Section 1.1: Overview of the Process
In this tutorial, we'll use an image of a tree as our example. The goal is to make text appear when hovering over specific areas of the tree. The steps are as follows:
- Insert the image into your HTML.
- Create three green overlay boxes that cover different parts of the tree: the leaves, stem, and pot.
- Set up an invisible text bubble that will become visible on hover.
- Utilize the :hover pseudo-class in CSS to display the text bubble when hovering over any of the green boxes.
- Optionally, remove the green background from the overlay boxes.
Here’s a look at how everything comes together:
Section 1.2: The Code in Action
Here is the complete code snippet for this effect:
<div class="img-container">
<img src="path_to_tree_image" alt="Tree Image" />
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div id="tooltip">This appears when you hover over the tree</div>
</div>
.img-container {
display: table;
position: relative;
margin: 4em;
}
.box {
position: absolute;
background-color: rgba(0, 255, 0, 0.5);
}
.box1 {
height: 40%;
width: 33%;
top: 7%;
left: 17%;
}
.box2 {
height: 33%;
width: 4%;
top: 47%;
left: 33%;
}
.box3 {
height: 18%;
width: 14%;
top: 80%;
left: 28%;
}
#tooltip {
position: absolute;
background-color: white;
top: 30%;
left: 55%;
right: 2%;
padding: 1.5em;
border: 2px solid limegreen;
display: none;
}
.box1:hover ~ #tooltip,
.box2:hover ~ #tooltip,
.box3:hover ~ #tooltip {
display: block;
}
Subsection 1.2.1: Explanation of the Code
In the HTML code, we wrap our image in a div container to allow for child elements. This is essential as it helps position the overlay boxes and the text bubble correctly within the container.
- `.img-container`: This div will match the size of the image, allowing us to position the overlay boxes accurately.
- `.box`: These are the semi-transparent green boxes positioned absolutely to overlap specific areas of the image.
- `#tooltip`: This is the text bubble that remains hidden until you hover over one of the green boxes.
The CSS utilizes the :hover pseudo-class to change the display property of the tooltip, making it visible when hovering over any of the boxes.
Chapter 2: Conclusion
Now that you've set up the hover effect, you can choose to remove the green backgrounds from the boxes for a cleaner look. Hovering over the tree will still trigger the tooltip to appear.
I hope this guide was helpful and informative!
The first video titled "Pure CSS tree view with custom tree icons" provides a visual guide on implementing CSS techniques similar to those described here.
The second video, "Text Change on Hover Using CSS [VOICE TUTORIAL]," walks you through creating dynamic text changes using CSS hover effects.
Some Final Words
Thank you for being a part of our community! If you found this content useful, please consider clapping for the story and following the author for more insights.