jquery mouse over image to reverse text

With the development of web pages, dynamic effects have become an important part of design, and among these effects, the effect of images and text appearing alternately is particularly common. This article introduces a jQuery-based implementation method for reversing text on mouse-over images.

1. Implementation Principle

Place pictures and text in the same element container, and achieve alternate display of pictures and text by controlling CSS styles. When the mouse is hovering, jqury is used to reverse the images and text in the container and modify the CSS style to achieve dynamic effects.

2. Implementation steps

1. Create HTML structure

First, create an HTML container containing images and text. The code is as follows:

<div class="pic-box">
  <img src="/static/imghw/default1.png"  data-src="图片地址"  class="lazy" alt="">
  <div class="text">文字内容</div>
</div>

2 , CSS style adjustment

Set the container style to relative positioning, set the image and text style to absolute positioning, and control the display priority through the z-index attribute. The code is as follows:

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

3. To achieve the inversion effect

When the mouse stays in the container, the picture and text are reversed, the transparency of the picture is reduced, and the transparency of the text is increased. This effect is achieved through jQuery, the code is as follows:

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

4. The final effect

The complete code is as follows:

<div class="pic-box">
  <img src="/static/imghw/default1.png"  data-src="图片地址"  class="lazy" alt="">
  <div class="text">文字内容</div>
</div>

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

The effect is as shown in the picture:

3. Summary

This article introduces a jQuery-based method for reversing text when the mouse passes through an image. The dynamic effect is achieved by controlling CSS styles and jQuery dynamic adjustments. This is a common implementation method of combining pictures and text, which can be applied to various web design.

The above is the detailed content of jquery mouse over image to reverse text. For more information, please follow other related articles on the PHP Chinese website!