How to show text on image when hovering?

html

responsive-design

css-transitions

web-accessibility

byNikita Barsukov·Oct 7, 2024

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.

explain-codes / Html / How to show text on image when hovering?

Linked

How to make in CSS an overlay over an image?



Css background-image-opacity?



Creating a Zoom Effect on an image on hover using CSS?



Add hover text without javascript like we hover on a user's reputation



Is there a `pointer-events:hoverOnly` or similar in CSS?

