How to Display Text on Image Mouseover with CSS and jQuery?

Mouseover Text on Image

Users often encounter challenges when attempting to display text on an image upon mouse hover. Conventional tooltip techniques may not always align with desired aesthetics or accessibility requirements. This article delves into CSS and jQuery-based approaches to achieve a sleek and efficient solution.

CSS Approach

Harnessing the power of the :hover pseudoelement in CSS3, we can achieve the desired effect without any JavaScript knowledge. The HTML structure requires a wrapper div that encompasses both the image and the text. The CSS rules position the text element underneath the image, initially hidden with visibility:hidden. Upon hovering over the image (class="hover"), the text becomes visible (visibility:visible).

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

#wrapper:hover .text {
  visibility: visible;
}

jQuery Approach

For those proficient in jQuery, an alternative method exists. In this approach, jQuery controls the visibility of the text element upon mouseover and mouseleave events.

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#wrapper p {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

jQuery:

$('.hover').mouseover(function() {
  $('.text').css("visibility", "visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility", "hidden");
});

Conclusion

Both CSS and jQuery provide viable solutions for displaying text on image mouseover. The choice between methods depends on personal preference and technical proficiency. By leveraging these techniques, developers can enhance user experience and create aesthetically pleasing interactions.