JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="canvas">
<div class="zoom" id="zoom" onclick="boing()">
   
<img src="http://www.hloe.co.uk/city.jpg">
   
</div></div>

CSS

@media screen and (max-width: 480px) {

.canvas {overflow:scroll;width:300px;height:300px;margin:auto;}

.zoom img {
    display:block;width: 100%; max-width: 100%;
}
.zoom {
    
    width: 300px;
    transition: all 1s ease-in-out;
}
.zoom2 {
    transform: scale(2,2)
}

}

JavaScript

function boing() {
document.getElementById("zoom").className = "zoom zoom2";



}