Explain Codes LogoExplain Codes Logo

How to show text on image when hovering?

html
responsive-design
css-transitions
web-accessibility
Nikita BarsukovbyNikita Barsukov·Oct 7, 2024
TLDR

To swiftly display text over an image upon hovering, we utilize position: absolute for the text inside a position: relative container along with visibility manipulation on hover. Here is this approach in action:

HTML:

<div class="img-wrap"> <img src="image.jpg" alt="Wow! Look at this image"> <p class="overlay">Text over the image? Magic!</p> </div>

CSS:

.img-wrap { position: relative; } /* This div is a magician */ .overlay { position: absolute; top: 50%; left: 50%; /* Behave, Mr.Text, stay put */ transform: translate(-50%, -50%); display: none; /* Mr.Text, it’s not your time yet ;-) */ } .img-wrap:hover .overlay { display: block; /* AbraCadabra! Mr.Text, your time to shine! */ }

The .overlay is concealed with display: none and upon the hover event over .img-wrap, it surfaces with display: block. An efficient method for a compelling hover effect!

Hover text optimizations: Mastering the magic trick

To magnify this neat trick, let's explore key tips and techniques to enhance the hover effect and optimize user experience:

Smoother text emergence with CSS transitions

Add a refined touch to your hover effect with CSS transitions. Pair opacity and visibility with transition to gracefully bring the text into view:

.overlay { /* We don't want the text to just pop! Let's make it smooth */ transition: opacity 0.5s, visibility 0.5s; opacity: 0; visibility: hidden; } .img-wrap:hover .overlay { /* Now you see me */ opacity: 1; visibility: visible; }

Adapting the magic for inline display

For cases where your image needs to align with other inline elements, consider setting .img-wrap to display: inline-block:

.img-wrap { display: inline-block; /* Welcome to the line party */ vertical-align: bottom; }

Perfectly centering the reveal

To ensure the text's grand appearance is bang in the middle, both vertically and horizontally, transform is your magic charm. The line-height and text-align: center further underscore the readability of the centered text on hover.

Positioning the concealed text just right

Precise overlay placement is key to the magic trick. That's where position: absolute steps in. Always explicitly define the dimensions to keep the layout intact.

Prepare for when the image decides to play hide and seek

Always have a fallback plan ready in case the image fails to load. Ensure that your text is still accessible and your layout remains intact.

Guidelines to perfect the hover spell

Crafting a competent hover effect calls for attention to detail and consideration of diverse user scenarios. Let's learn a few pro tips curated for hover perfection:

Embracing the basic attributes: title and alt

These simple HTML attributes make a significant impact when you opt for simpler hover tooltips or ensure image accessibility.

Responsiveness and image overlays

Ensure a fitting experience across different device sizes and make sure your text scales appropriately.

Container elements – Managing the magic components

Using a container element provides better control over the hover effect while maintaining the integrity of the layout.

Always follow the magic handbook – Web accessibility

Adhere to the web accessibility standards while crafting your hover effects. This includes not just color alterations but also ensuring usability with keyboard navigation.