JSFiddle - React, Tailwind, and code Playground

by fristyr

HTML

<div id=burningman>
<figure>
<img src="love-bike.jpg" alt>
</figure>
<figure class="halvsies">
<img src="burning-man-pyre.jpg" alt >
</figure>
…
</div>

CSS

#burning-man { display: flex; flex-flow: row wrap; font-size: 0; }
#burning-man figure {
flex: 1; margin: 0;
min-width: 300px; position: relative;
}
#burning-man figure img {
width: 100%; height: auto;
opacity: 0; transition: .5s;
}
#burning-man figure img.halvsies {
flex: .5; min-width: 150px;
}
#burning-man figure img.visible { opacity: 1; }