如何在不改变大小的情况下“缩放”图像 CSS

Question

 #image{ background:red } #image:hover { transform: scale(1.1); transition: all.5s ease }

 <img height="200px" width="200px" id="image"/>

I need to keep the size of 200x200, something like a zoom. It should be solved only with the img element, not adding a parent.

Thanks!

Answer 1

It's possible while using background-image without adding a parent element. That you can add a transition to its background-size :

 #image{ transition: background-size.5s; background-size: 100%; background-image: url(https://picsum.photos/200/200); background-position: center; } #image:hover { background-size: 120%; }

 <img height="200px" width="200px" id="image" />