JSFiddle - React, Tailwind, and code Playground

by mathijsflietstra

HTML

<div>40% wide div [<a href="#">toggle overflow</a>]
    <div>
        <img src="http://lorempixel.com/400/200" />
    </div>400px wide image</div>

CSS

img {
    margin: 0 -100% 0 -100%;
}
/* ALL of the CSS below is for demonstration purposes only */
 body {
    text-align: center;
    font-family: verdana;
    font-size: 10pt;
    line-height: 20pt;
}
body > div {
    margin: 0px auto;
    width: 40%;
    background-color: lightblue;
    overflow: hidden;
}
img {
    margin: 0 -100% 0 -100%;
    vertical-align: top;
}
.overflow {
    overflow: visible;
}

JavaScript

$(document).ready(function () {
    $('a').click(function () {
        $('body > div').toggleClass('overflow');
    });
})