0

How to create increase/decrease size effect using CSS in JavaScript

const zoomin = () => {
    const myImg = document.getElementById("sea");
    let currWidth = myImg.clientWidth;
    if (currWidth == 500) {
        alert("Maximum zoom-in level reached.");
    } else {
        myImg.style.width = (currWidth + 50) + "px";
    }
}

const zoomout = () => {
    const myImg = document.getElementById("sea");
    let currWidth = myImg.clientWidth;
    if (currWidth == 50) {
        alert("Maximum zoom-out level reached.");
    } else {
        myImg.style.width = (currWidth - 50) + "px";
    }
}

document.getElementById('zoomin').addEventListener("click", () => zoomin());

document.getElementById('zoomout').addEventListener("click", () => zoomout());
  <p>
      <button type="button" id="zoomin">Zoom In</button>
      <button type="button" id="zoomout">Zoom Out</button>
  </p>

<img id="sea" src="https://i.imgur.com/kOFqgtE.jpg"/>
button {
    padding: 3px 6px;
}

button img {
    vertical-align: middle;
}
RUN
add comment
Suggest a different solution or add another example