Author: | Michael Ferry |
---|---|
Views Total: | 28,802 views |
Official Page: | Go to website |
Last Update: | April 30, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS/CSS3 based responsive accordion slider that allows you to horizontally expands the images on mouse hover. On small screens such as mobile devices, the accordion slider will be transformed into a vertical image list to fit its parent container.
How to use it:
The markup structure to create an accordion slider from an unordered list.
<div class="accordion"> <ul> <li> <div> <a href="#"> <h2>Title 1</h2> <p>Description 1</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 2</h2> <p>Description 2</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 3</h2> <p>Description 3</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 4</h2> <p>Description 4</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 5</h2> <p>Description 5</p> </a> </div> </li> <li> <div> <a href="#"> <h2>Title 6</h2> <p>Description 6</p> </a> </div> </li> </ul> </div>
The basic CSS styles for the accordion slider.
.accordion { width: 100%; max-width: 1080px; height: 250px; overflow: hidden; margin: 50px auto; } .accordion ul { width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0; } .accordion ul li { display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 250px; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease; } .accordion ul li div { display: block; overflow: hidden; width: 100%; } .accordion ul li div a { display: block; height: 250px; width: 100%; position: relative; z-index: 3; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; font-family: Open Sans, sans-serif; transition: all 200ms ease; } .accordion ul li div a * { opacity: 0; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; z-index: 5; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 400ms ease; transition: all 400ms ease; } .accordion ul li div a h2 { font-family: Montserrat, sans-serif; text-overflow: clip; font-size: 24px; text-transform: uppercase; margin-bottom: 2px; top: 160px; } .accordion ul li div a p { top: 160px; font-size: 13.5px; }
Add background images to the accordion slider.
.accordion ul li:nth-child(1) { background-image: url("1.jpg"); } .accordion ul li:nth-child(2) { background-image: url("2.jpg"); } .accordion ul li:nth-child(3) { background-image: url("3.jpg"); } .accordion ul li:nth-child(4) { background-image: url("4.jpg"); } .accordion ul li:nth-child(5) { background-image: url("5.jpg"); } .accordion ul li:nth-child(6) { background-image: url("6.jpg"); }
Create the expand effects using CSS3 transforms.
.accordion ul:hover li { width: 8%; } .accordion ul:hover li:hover { width: 60%; } .accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); } .accordion ul:hover li:hover a * { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
Destroy the accordion slider and display as an image list when the screen size is smaller than 600px.
@media screen and (max-width: 600px) { .accordion { height: auto; } .accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover { position: relative; display: table; table-layout: fixed; width: 100%; -webkit-transition: none; transition: none; } }
Hi there, this is an interesting piece of code but as there is no documentation, I wonder if the width attribute in the .accordion ul li declaration is calculated based on a formula containing the original dimensions of the image and the number of images in the slider. Please tell us more if possible?
In the demo, the images are centered, even before the slide “stretches”. But in this code, they’re not. How to get them to center?
Code worked great for me — curious if you know how to add on an in-body “pop-up” which would display the full image if the image with focus were clicked. Thanks for posting this!!
helped a lot. thank you.