Author: | gunesenes |
---|---|
Views Total: | 702 views |
Official Page: | Go to website |
Last Update: | September 11, 2021 |
License: | MIT |
Preview:

Description:
A responsive photo gallery where users can expand & collapse images just like an accordion slider.
How to use it:
1. Add images as background to panels.
<div class="container"> <div class="panel active" style="background-image:url(img/1.jpg);"> <h3>CSS Script</h3> </div> <div class="panel" style="background-image:url(img/2.jpg);"> <h3>CSS Script</h3> </div> <div class="panel" style="background-image:url(img/3.jpg);"> <h3>CSS Script</h3> </div> <div class="panel" style="background-image:url(img/4.jpg);"> <h3>CSS Script</h3> </div> <div class="panel" style="background-image:url(img/5.jpg);"> <h3>CSS Script</h3> </div> <div class="panel" style="background-image:url(img/6.jpg);"> <h3>CSS Script</h3> </div> </div>
2. The necessary CSS styles.
.container { display: flex; width: 90vw; } .panel { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; height: 85vh; border-radius: 5px; color: #ffffff; cursor: pointer; flex: .5; margin: 10px; transition: all 700ms ease-in; } .panel h3 { font-size: 24px; position: absolute; bottom: 20px; left: 20px; margin: 0; opacity: 0; } .panel.active { flex: 5; } .panel.active h3 { opacity: 1; transition: opacity .3s ease-in .4s; } @media(max-width:480px) { .container { width: 100vw; } .panel:nth-last-of-type(6), .panel:nth-last-of-type(7) { display: none; } }
3. Enable the accordion-style smooth transitions by toggling CSS classes.
const panels = document.querySelectorAll('.panel'); panels.forEach((panel) => { panel.addEventListener('click', () => { removeActiveClasses(); panel.classList.add('active'); }); }); function removeActiveClasses() { panels.forEach((panel) => { panel.classList.remove('active'); }); }