Estoy creando una galería de fotos.
let img = document.createElement('img') img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg%29.svg.png" // console.log(alldata[i].links[0].href) let border = document.createElement('div') border.appendChild(img) border.className = 'gallery' document.body.appendChild(border) :root { --wid: 300px; } .gallery{ background: grey; width: var(--wid); } img{ height: 250px; width: var(--wid); } img:hover { transform: scale(1.5); } Quiero activar un efecto en el que cuando el usuario pase el cursor sobre la img , se hará más grande pero mantendrá el mismo ancho. He intentado usar transform: scale(1.5); o zoom:150% . Ambos funcionan para encontrar, pero harán que la imagen de ancho y alto sea más grande.
¿Hay alguna manera de que pueda activar el efecto similar al zoom , pero no cambia el ancho y la altura de la imagen?
Este es un sitio web de galería de fotos donde se muestra el efecto similar que quiero hacer (cuando el usuario pasa el cursor sobre la img , la img se acercará un poco como alrededor del 110%)
¡Gracias por cualquier respuesta!
Es bastante sencillo: simplemente necesita configurar .gallery para ocultar el contenido desbordado y luego agregar una transición CSS simple al elemento img .
p/s: es posible que desee utilizar object-fit para asegurarse de no terminar sesgando la relación de aspecto de la imagen.
:root { --wid: 300px; } .gallery { background: grey; width: var(--wid); overflow: hidden; } img { display: block; height: 250px; width: var(--wid); transition: all .25s ease-in-out; /* Optional: to avoid skewing of aspect ratio */ object-fit: contain; } img:hover { transform: scale(1.5); } <div class="gallery"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg%29.svg.png" /> </div> :root { --wid: 300px; } .gallery { background: grey; width: var(--wid); overflow: hidden; } img { display: flex; height: 250px; width: var(--wid); transition: all .50s ease-in-out; /* Optional: to avoid skewing of aspect ratio */ object-fit: contain; } img:hover { transform: scale(2); } <div class="gallery"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg%29.svg.png" /> </div>