Analysis of the principles of several ways to imitate the magnifying glass effect in CSS3

Why is the title of the article “Imitation Magnifying Glass”?
Because what I want to talk about today is not like what is generally said, that when the mouse moves in, a large local image pops up next to it. That is easy to write and does not require many skills (use relative positioning to position the parent element (or: the original image), and absolute positioning to position the local large image (purpose: to make it somewhere next to the original image), use CSS to control the style next to it and use mouse events to listen... Of course, you can also directly use the interface in jQuery - $('class name').jqzoom({zoomwidth:xx; zoomheight: xx; zoomType:'reverse';}) The last Type defines the magnifying glass type)

Okay, let’s get back to the topic. What I want to talk about today is the animation of enlarging the picture at its original location when the mouse moves in !
That's right, animation. (As follows: cut out from a website)

The first thing that came to mind was the @keyframes attribute of CSS3, because it is used more often.
For example: You can use from...to to specify the style - entrance animation and exit animation

For example: You can achieve this through transition ( today's focus )

Prophet: CSS3 attribute transform——(rotate: rotate, scale: scale, skew: skew, translate: translate)

For example:
The normal width of the element is 100px, and the width becomes 200px when the mouse passes over it.
If you only set the width value, the effect is as follows:

Doesn’t it look very stiff? Let's take a look at the effect of adding transition:

After looking at the difference between the two effects, you probably understand the role of the transition attribute. The goal of this example is similar to the width change, but the final effect is changed. Please continue to look at the detailed code below:

<div id="container">
  <img src="./little_boy.jpg" />
  <span>Hello everyone! Who am I? </span>
</div>

#container {
  margin: 200px;
  position: relative;
  width: 300px;
  height: 300px;
  background-color: greenyellow;
  transition: transform .5s ease-out;
}

#container img {
  width: 100%;
  height: 100%;
}

#container span {
  position: absolute;
  top: 0;
  left: 0;
  margin: 6px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 18px;
  color: white;
  text-align: center;
}

#container:hover {
  transform: scale(1.3);
}

Analysis:
(1) Add the hover pseudo-class to the container and set the container magnification effect through the transform attribute. (2) Set the transition attribute of the container, with the attribute value being transform and its animation duration.

This concludes this article about the principles and analysis of several ways to simulate a magnifying glass effect in CSS3. For more relevant CSS3 magnifying glass content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!