JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<div class="diagram-wrapper">
    <label for="toggle-1">Layer 1</label>
    <input type="checkbox" id="toggle-1">
   
    <div class="layer layer-1"></div>
    
    <label for="toggle-2">Layer 2</label>
    <input type="checkbox" id="toggle-2">
    <div class="layer layer-2"></div>
    
    <label for="toggle-3">Layer 3</label>
    <input type="checkbox" id="toggle-3">
    <div class="layer layer-3"></div>
</div>

SCSS

.diagram-wrapper {
    position: relative;
    
    &:after {
        padding-top: 75%; // 4:3 ratio
        // padding-top: 56.25% // 16:9
        // padding-top: 100% // square
        display: block;
        content: ' ';
    }
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

label, input {
    position: relative;
    z-index: 10;
}

input[type=checkbox]:checked + .layer {
    opacity: 1;
}

.layer-1 {
    background-image: url('http://i.imgur.com/S81FO8t.png');
}

.layer-2 {
    background-image: url('http://i.imgur.com/obQV4Aj.png');
}

.layer-3 {
    background-image: url('http://i.imgur.com/H5FQYMo.png');
}