no importa cuánto lo intente, los divs siempre cambian de posición cuando lo reescalo la primera vez Y SOLO LA PRIMERA. quiero que se escale en su posición original y se quede donde está. mi html:
<div id="rub4" class="rub-for-size"> <div id="t-loisir" class="div-title"> <h2>LOISIR</h2> </div> <div id="loisir_imgs"> <figure id="travel_img"> <img src="img/travel.png" class="rub4_img"> <figcaption>Voyage</figcaption> </figure> </div>JS
var fig1 = document.getElementById("travel_img"); fig1.addEventListener("mouseover", Zoom1); fig1.addEventListener("mouseleave", unZoom1); function Zoom1(){ // fig1.style.transformOrigin = "50 50"; // fig1.style.transform = "translate(50px,50px)" fig1.style.transform = "scale(1.5)"; } function unZoom1(){ // fig1.style.transformOrigin = "0 0"; // fig1.style.transform = "scale(1)"; fig1.style.transform = "translate(0.5%)" }¡Bienvenidos!
El elemento que intenta cambiar de tamaño travel_img , que es una etiqueta de figure , es un elemento de bloque. Por lo tanto, está cambiando el tamaño de mucho más que solo la imagen.
No tengo del todo claro cuál es el problema, pero ¿ha intentado mover la identificación travel_img a la etiqueta <img> ?
Como tal:
<figure> <img id="travel_img" src="img/travel.png" class="rub4_img"> <figcaption>Voyage</figcaption> </figure>Si entiendo su problema correctamente, solo desea escalar una vez. Declaré un contador cuyo valor determina la escala. ¿Quizás eso era lo que querías decir?
[Javascript]
const fig1 = document.getElementById("travel_img"); let counter = 0; fig1.addEventListener("mouseover", () => { if (!counter) { fig1.style.transform = "scale(1.5)"; counter++; fig1.addEventListener("mouseleave", () => { fig1.style.transform = "translate(0.5%)"; }); } });