Image Accordion
A nice experimental and playful CSS only image accordion. Can be used for many purposes. Background images are added with js, so you don't have to change any CSS. Images simply stack on mobile. Check markup for more details about usage.
<div class="image-accordion">
<ul>
<li class="has-background-image" tabindex="1" data-background="https://via.placeholder.com/800x600">
<div>
<a>
<h2>Office Part I</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li class="has-background-image" tabindex="2" data-background="https://via.placeholder.com/800x600">
<div>
<a>
<h2>Office Part II</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li class="has-background-image" tabindex="3" data-background="https://via.placeholder.com/800x600">
<div>
<a>
<h2>12 Great Landscapes</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li class="has-background-image" tabindex="4" data-background="https://via.placeholder.com/800x600">
<div>
<a>
<h2>Team Meetup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li class="has-background-image" tabindex="5" data-background="https://via.placeholder.com/800x600">
<div>
<a>
<h2>Purple Shades</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
<li class="has-background-image" tabindex="6" data-background="https://via.placeholder.com/800x600">
<div>
<a>
<h2>Blue Note</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</a>
</div>
</li>
</ul>
</div>