JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

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

<div class="click" onclick="boing()">Click Me!</div>

</div>

CSS

.canvas {overflow:hidden;max-width:800px;position:relative;}

.canvas img {width:100%;}

.click {position:absolute;width:300px;height:300px;top:0;}



@media screen and (max-width: 480px) {
.canvas {width:300px;height:300px;margin:auto;overflow:scroll;text-align:center;}

.canvas img {width:100%;transition: all .5s ease-in-out;}

.zoom img {width:200%;}

}

JavaScript

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



}