How to Display Text on Image Hover Using CSS and jQuery?

Displaying Text on Image Hover

Creating a small box that appears when a user hovers over an image can be achieved through various methods. Here's a comprehensive guide to help you achieve the desired effect:

CSS3 Using :hover Pseudoelement

By utilizing the :hover pseudoelement in CSS3, you can display a box on image hover. The HTML and CSS code for this method are as follows:

<div>

#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

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

jQuery

Alternatively, you can use jQuery to achieve the same result. Here's the HTML, CSS, and jQuery code:

<div>

#wrapper p {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

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

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

This jQuery code will show the "text" element when the mouse hovers over the image and hide it when the mouse leaves.

Customizing the Box

To customize the size and position of the box, you can adjust the CSS values provided in the bottom: and left: properties. To remove the border connection to the image, add the following to your CSS:

#wrapper img {
  border: none;
}

Multiple Images and Captions

If you have multiple images and captions, you can create a wrapper div for each image and include the image and text elements within. Simply copy the format shown in the code snippet and replace the image source and text accordingly.

The above is the detailed content of How to Display Text on Image Hover Using CSS and jQuery?. For more information, please follow other related articles on the PHP Chinese website!