no matter how hard i try, the divs always change possition when i rescale it the first time AND ONLY THE FIRST. i want it to scale on it's original position and stay where it is. my 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%)"
}
Welcome!
The element you are trying to resize travel_img, which is a figure tag, is a block element. So it's resizing much more than just the image.
I'm not entirely clear what the problem is, but have you tried to move the travel_img id to the <img> tag?
As so:
<figure>
<img id="travel_img" src="img/travel.png" class="rub4_img">
<figcaption>Voyage</figcaption>
</figure>
If I understand your problem correctly, you only want to do the scaling once. I declared a counter whose value determines the scaling. Maybe that what you meant?
[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%)";
});
}
});