有没有什么方法可以在没有 JavaScript 的情况下仅在 html 和 css 中实现此功能？

Question

Question Image

I want to achieve such zoom functionality in Html and CSS only because where I want to implement this doesn't supports JavaScript. Is this possible?

Answer 1

Because the zoom responds to a touch or mouse event and uses its position this is not possible without JS, you can however just enlarge the image on hover, also works on mobile.

 img.zoomer { transition: transform 0.3s; } img.zoomer:hover { transform: scale(1.5); } /* css below is irrelevant */ body { margin: 0; }.center { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; }

 <div class="center"> <img class="zoomer" src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="300"> </div>

Answer 2

In order to be able to zoom on hover with an image inserted with <img> without javascript try this.

 #imageZoom{
  overflow:hidden;
  transition: all 1s;
  width:200px;
  height:200px;
}

#imageZoom img:hover{
  transform: scale(1.2);
}

<div id="imageZoom">
  <img src="http://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png">
</div>

Answer 3

Yes, you can get the detail image to show when you hover on the main image. Here's an example:

 .main, .detail { width: 200px; height: 200px; }.main { background-color: green; } img.detail { display: none; background-color: brown; position: absolute; top: 0; left: 0; } div.container:hover img.detail { display: block; }.container { width: auto; height: auto; }

 <div class="container"> <img class="main" src=""/> <img class="detail" src=""/> </div>

If you want several bits to have detail then you could have several divs which are positioned at the right places (in terms of % distance left and right of the main image) and when the user hovers over one show its related detail.

Answer 4

Today all about is JS. But you can do wonderful things in CSS only and...

Of course YOU CAN DO EXACTLY THAT in vanillaCSS
Here are TWO demonstration examples.

1. Louping effect on the image itself. That works in fluent layouts and mostover is the chosed solution.

2. The demonstration for the louping effect you asked for. That is a boxed design with a setup done in css vars. So, if you want to make it repsonsive up to now you need to define the css vars to the different breakpoints. (Head up: the loupe box has to be placed in the container as in the example and is actual shown below the original image. But you are free to position it anywhere else - ie by positioning it absolute/fixed/floated... - as the html structure keeps untouched.)

Notice: more scaling up as it is needed is not a problem to both demonstrations.

 html { font-family: sans-serif; } /* zoomBox */.zoomBox { position: relative; width: 400px; overflow: hidden; }.zoomBox * { -webkit-box-sizing: border-box; box-sizing: border-box; }.zoomBox img { position: relative; width: 100%; height: auto; z-index: -1; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.zoomBox.hover { position: absolute; width: 33.333333%; height: 33.333333%; }.zoomBox.hover.TL { top: 0; left: 0; }.zoomBox.hover.TL:hover ~ img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.zoomBox.hover.TC { top: 0; left: 33.333333%; }.zoomBox.hover.TC:hover ~ img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.zoomBox.hover.TR { top: 0; right: 0; }.zoomBox.hover.TR:hover ~ img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.zoomBox.hover.CL { top: 33.333333%; left: 0; }.zoomBox.hover.CL:hover ~ img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.zoomBox.hover.CC { top: 33.333333%; left: 33.333333%; }.zoomBox.hover.CC:hover ~ img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.zoomBox.hover.CR { top: 33.333333%; right: 0; }.zoomBox.hover.CR:hover ~ img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.zoomBox.hover.BL { bottom: 0; left: 0; }.zoomBox.hover.BL:hover ~ img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.zoomBox.hover.BC { bottom: 0; left: 33.333333%; }.zoomBox.hover.BC:hover ~ img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.zoomBox.hover.BR { bottom: 0; right: 0; }.zoomBox.hover.BR:hover ~ img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } /* imageLouping */.imageLoupingBox { --imageWidth: 400px; --aspectRatio: 0.625; --imageHeight: calc( var(--imageWidth) * var(--aspectRatio) ); --hoverWidth: calc( var(--imageWidth) * 0.33333334); --hoverHeight: calc( var(--imageHeight) * 0.33333334); position: relative; }.imageLoupingBox * { -webkit-box-sizing: border-box; box-sizing: border-box; }.imageLoupingBox img.imageLoupe { position: relative; width: var(--imageWidth); height: var(--imageHeight); z-index: -1; }.imageLoupingBox.loupeBox { position: relative; width: var(--imageWidth); height: var(--imageHeight); overflow: hidden; border: 1px solid green; }.imageLoupingBox.loupeBox img { width: 100%; height: auto; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 0; -webkit-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; }.imageLoupingBox.loupeBox:after { content: "CSS LOUPE"; display: block; width: 100%; height: 12px; text-align: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: -2; font-family: sans-serif; opacity: 1; -webkit-transition: all 0.05s; -o-transition: all 0.05s; transition: all 0.05s; }.imageLoupingBox.hover { position: absolute; width: var(--hoverWidth); height: var(--hoverHeight); }.imageLoupingBox.hover:hover ~.loupeBox:after { opacity: 0; -webkit-transition: all 0.05s; -o-transition: all 0.05s; transition: all 0.05s; }.imageLoupingBox.hover:hover ~.loupeBox img { opacity: 1; -webkit-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; }.imageLoupingBox.hover.TL { top: 0; left: 0; }.imageLoupingBox.hover.TL:hover ~.loupeBox img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.imageLoupingBox.hover.TC { top: 0; left: var(--hoverWidth); }.imageLoupingBox.hover.TC:hover ~.loupeBox img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.imageLoupingBox.hover.TR { top: 0; left: calc( var(--hoverWidth) * 2 ); }.imageLoupingBox.hover.TR:hover ~.loupeBox img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.imageLoupingBox.hover.CL { top: var(--hoverHeight); left: 0; }.imageLoupingBox.hover.CL:hover ~.loupeBox img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: center left; -ms-transform-origin: center left; transform-origin: center left; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.imageLoupingBox.hover.CC { top: var(--hoverHeight); left: var(--hoverWidth); }.imageLoupingBox.hover.CC:hover ~.loupeBox img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.imageLoupingBox.hover.CR { top: var(--hoverHeight); left: calc( var(--hoverWidth) * 2 ); }.imageLoupingBox.hover.CR:hover ~.loupeBox img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.imageLoupingBox.hover.BL { top: calc( var(--hoverHeight) * 2); left: 0; }.imageLoupingBox.hover.BL:hover ~.loupeBox img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.imageLoupingBox.hover.BC { top: calc( var(--hoverHeight) * 2); left: var(--hoverWidth); }.imageLoupingBox.hover.BC:hover ~.loupeBox img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }.imageLoupingBox.hover.BR { top: calc( var(--hoverHeight) * 2); left: calc( var(--hoverWidth) * 2 ); }.imageLoupingBox.hover.BR:hover ~.loupeBox img { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }

 <h1>ZOOMING EFFECTS vanillaCSS</h1> <h2>Zoom box: enlarge image itself</h2> <div class="zoomBox"> <div class="hover TL"></div> <div class="hover TC"></div> <div class="hover TR"></div> <div class="hover CL"></div> <div class="hover CC"></div> <div class="hover CR"></div> <div class="hover BL"></div> <div class="hover BC"></div> <div class="hover BR"></div> <img src="https://source.unsplash.com/qpemSW6_1Z0"> </div> <hr> <h2>Image with a cssLOUPE</h2> <div class="imageLoupingBox"> <div class="hover TL"></div> <div class="hover TC"></div> <div class="hover TR"></div> <div class="hover CL"></div> <div class="hover CC"></div> <div class="hover CR"></div> <div class="hover BL"></div> <div class="hover BC"></div> <div class="hover BR"></div> <img class="imageLoupe" src="https://source.unsplash.com/qpemSW6_1Z0"> <div class="loupeBox"> <.--<img src="images/demoImage:jpg">--> <img src="https.//source.unsplash.com/qpemSW6_1Z0"> </div> </div>