Author: | tonkec |
---|---|
Views Total: | 3,144 views |
Official Page: | Go to website |
Last Update: | March 18, 2016 |
License: | MIT |
Preview:

Description:
A pure CSS/CSS3 expanding slideshow that allows you to expand a slideshow item on mouse hover. Behaviors like an accordion.
How to use it:
Add block elements to the slideshow.
<div class="block image1"> <div class="layer"></div> <div class="p-container"> <p class="img-p"> Description 1 </p> </div> </div> <div class="block image2"> <div class="layer"></div> <div class="p-container"> <p class="img-p"> Description 2 </p> </div> </div> <div class="block image3"> <div class="layer"></div> <div class="p-container"> <p class="img-p"> Description 3 </p> </div> </div>
The primary CSS styles for the slideshow.
.block { width: 10%; height: 300px; display: inline-block; background-color: #E83F6F; cursor: pointer; position: relative; -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out; -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out; -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out; -o-transition: width .5s ease-in-out, background-color .5s ease-in-out; transition: width .5s ease-in-out, background-color .5s ease-in-out; text-align: center; } .block:hover { background-color: #2274A5; width: 30%; -webkit-transition: width .5s ease-in-out, background-color .5s ease-in-out; -moz-transition: width .5s ease-in-out, background-color .5s ease-in-out; -ms-transition: width .5s ease-in-out, background-color .5s ease-in-out; -o-transition: width .5s ease-in-out, background-color .5s ease-in-out; transition: width .5s ease-in-out, background-color .5s ease-in-out; } .block:hover .img-p { opacity: 1; -webkit-transition: opacity .5s .51s ease-in-out; -moz-transition: opacity .5s .51s ease-in-out; -ms-transition: opacity .5s .51s ease-in-out; -o-transition: opacity .5s .51s ease-in-out; transition: opacity .5s .51s ease-in-out; } .block:hover .layer { opacity: .5; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } .layer { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #000; width: 100%; height: 100%; opacity: 0; } .img-p { position: absolute; font-size: 16px; opacity: 0; color: #FFF; text-align: left; line-height: 1.6em; } .p-container { width: 80%; position: relative; top: 35%; margin-left: 5%; }
Add background images to the block elements.
.image1 { background-image: url(1.jpg); -webkit-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; } .image2 { background-image: url(2.jpg); -webkit-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; } .image3 { background-image: url(3.jpg); -webkit-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center; }
Make the slideshow responsive.
@media (max-width: 768px) { .block { width: 100%; height: 200px; -webkit-transition: height .5s ease-in-out; -moz-transition: height .5s ease-in-out; -ms-transition: height .5s ease-in-out; -o-transition: height .5s ease-in-out; transition: height .5s ease-in-out; } .block:hover { width: 100%; height: 400px; -webkit-transition: height .5s ease-in-out; -moz-transition: height .5s ease-in-out; -ms-transition: height .5s ease-in-out; -o-transition: height .5s ease-in-out; transition: height .5s ease-in-out; } } @media (min-width: 768px) { .block { width: 15%; } } @media (min-width: 992px) { .block { width: 10%; } }