JSFiddle - React, Tailwind, and code Playground by Kamal Kumawat August 21, 2019 HTML <h1>Sample</h1> Here is some text. <div class="wrapper"> <img class="img" src="http://3.bp.blogspot.com/_018-F1Dqivo/Ra2o8ZyGmlI/AAAAAAAAAHM/Wynf4p-LArc/s1600/img+src%3D" /> </div> <input id="button" type="button" value="Click Me To Toggle" /> CSS .wrapper { position:relative; width: 150px; height: 150px; } .img, .cross-img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .cross-img { opacity: 0.5; } JavaScript $('#button').click(function() { $('#cross').toggle(); });