sliding image panels with css3

7/2/2015 Sliding Image Panels with CSS3

http://tympanus.net/codrops/2012/01/17/slidingimagepanelswithcss3/ 1/21

In Tutorials by Mary Lou January 17, 2012 69 Comments

Sliding Image Panels with CSS3Today we'll show you how to create some neat sliding image panels with CSS only. Theidea is to use background images for the panels and animate them when clicking on alabel. We'll use radio buttons with labels and target the respective panels with the generalsibling selector.

Codrops

http://tympanus.net/codrops/author/crnacura/

http://tympanus.net/codrops/category/tutorials/

http://tympanus.net/codrops



Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is touse background images for the panels and animate them when clicking on a label. We’ll use radiobuttons with labels and target the respective panels with the general sibling selector.

The beautiful images are by Joanna Kustra and they are licensed under the AttributionNonCommercial 3.0 Unported Creative Commons License.

You might as well be interested in Filter Functionality with CSS3 where we have used a similartechnique for filtering elements based on their type.

http://tympanus.net/Tutorials/CSS3SlidingImagePanels/

http://creativecommons.org/licenses/by-nc/3.0/

http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/

http://www.behance.net/qstra



Please note: the result of this tutorial will only work as intended in browsers that supportCSS transitions and animations.

The Markup

The HTML will consist of three major parts: the radio buttons and the labels, the container with thepanels and their “slices” for each image, and the titles. The container with the class crbgimg partwill have a division for each of the panels and inside we’ll place spans for every image with theright background position. So, the first panel will have four slices, each having the one of theimages as background with the leftmost position. The second panel will have again four slices butnow the background position will be moved to be showing the next part of the respective image:

<section class="cr‐container">

<!‐‐ radio buttons and labels ‐‐> <input id="select‐img‐1" name="radio‐set‐1" type="radio" class="cr‐selector‐img‐1" checked <label for="select‐img‐1" class="cr‐label‐img‐1">1</label>

<input id="select‐img‐2" name="radio‐set‐1" type="radio" class="cr‐selector‐img‐2" /> <label for="select‐img‐2" class="cr‐label‐img‐2">2</label>





<div class="clr"></div>

<!‐‐ panels ‐‐> <div class="cr‐bgimg"> <div> <span>Slice 1 ‐ Image 1</span> <span>Slice 1 ‐ Image 2</span> <span>Slice 1 ‐ Image 3</span> <span>Slice 1 ‐ Image 4</span> </div> <div> <span>Slice 2 ‐ Image 1</span> <span>Slice 2 ‐ Image 2</span> <span>Slice 2 ‐ Image 3</span> <span>Slice 2 ‐ Image 4</span> </div> <div> <span>Slice 3 ‐ Image 1</span> <span>Slice 3 ‐ Image 2</span> <span>Slice 3 ‐ Image 3</span> <span>Slice 3 ‐ Image 4</span> </div> <div> <span>Slice 4 ‐ Image 1</span> <span>Slice 4 ‐ Image 2</span>



<span>Slice 4 ‐ Image 3</span> <span>Slice 4 ‐ Image 4</span> </div> </div>

<!‐‐ titles ‐‐> <div class="cr‐titles"> <h3> <span>Serendipity</span> <span>What you've been dreaming of</span> </h3> <h3> <span>Adventure</span> <span>Where the fun begins</span> </h3> <h3> <span>Nature</span> <span>Unforgettable eperiences</span> </h3> <h3> <span>Serenity</span> <span>When silence touches nature</span> </h3> </div>

</section>



The h3 elements for the titles will have two spans, one for the main headline and one for the subheadline.

Let’s style this baby.

The CSS

I will omit all the vendor prefixes, but you will, of course, find them in the files.We’ll be going through the style of demo 1.

Our aim is to first hide those radio buttons by covering them up with labels. In web browsers,clicking on a label will make the respective checkbox or radio button selected. Giving an ID to theinput, we can use the for = idref attribute of the label to reference the respective input.

Second, we want to place all the background images correctly and third, we want to show therespective image slices and titles when clicking on a label.

So, lets first syle the section and give it a white border with some subtle box box shadow:

http://www.w3.org/TR/html4/interact/forms.html#adef-for



Since we want to use the general sibling selector in order to “reach” the right image slices andtitles, we need to place the labels before those containers. Let’s make sure that they are on top asa layer (zindex) and push its position down by adding a top margin of 350px;

.cr‐container width: 600px; height: 400px; position: relative; margin: 0 auto; border: 20px solid #fff; box‐shadow: 1px 1px 3px rgba(0,0,0,0.1);



Let’s prettify the label by adding a little circle. We’ll create a pseudo element and place it centeredbehind the label text:

.cr‐container label font‐style: italic; width: 150px; height: 30px; cursor: pointer; color: #fff; line‐height: 32px; font‐size: 24px; float:left; position: relative; margin‐top: 350px; z‐index: 1000;



In order to create a separation between the panels we’ll use a little trick. We’ll create anotherpseudoelement for the label and extend it to stretch over the panel. Using a gradient, we’ll makethe line “fade out” at the top:

.cr‐container label:before content:''; width: 34px; height: 34px; background: rgba(130,195,217,0.9); position: absolute; left: 50%; margin‐left: ‐17px; border‐radius: 50%; box‐shadow: 0px 0px 0px 4px rgba(255,255,255,0.3); z‐index:‐1;



The last panel should not have that line so we simply give it 0 width:

Now, that we’ve taken care of the label look, we can hide the inputs:

Whenever we click on a label, the respective input gets checked. Now we can target the

.cr‐container label:after width: 1px; height: 400px; content: ''; background: linear‐gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); position: absolute; bottom: ‐20px; right: 0px;

.cr‐container label.cr‐label‐img‐4:after width: 0px;

.cr‐container input display: none;



respective label using the general sibling selector. So, we will change the color the “selected”label:

And we’ll also change the background color and box shadow of its cicle pseudoelement:

The container for the image panels will occupy all the width and it will be positioned absolutely.This container will be used later in order to set the background image to the currently selectedimage. We need to do this in order to have an image visible by default. So we’ll also add somebackground properties already:

.cr‐container input.cr‐selector‐img‐1:checked ~ label.cr‐label‐img‐1,



.cr‐container input.cr‐selector‐img‐4:checked ~ label.cr‐label‐img‐4 color: #68abc2;

.cr‐container input.cr‐selector‐img‐1:checked ~ label.cr‐label‐img‐1:before,



.cr‐container input.cr‐selector‐img‐4:checked ~ label.cr‐label‐img‐4:before background: #fff; box‐shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);



Since we have four panels/images, one panel will have the width of 150 pixels (600 divided by 4).The panels will be floating left and we’ll hide their overflow since we don’t want to see the slicescoming out when we slide them:

Each slice span will be positioned absolutely and initially, they will be hidden by placing them out

.cr‐bgimg width: 600px; height: 400px; position: absolute; left: 0px; top: 0px; z‐index: 1; background‐repeat: no‐repeat; background‐position: 0 0;

.cr‐bgimg div width: 150px; height: 100%; position: relative; float: left; overflow: hidden; background‐repeat: no‐repeat;



of the panel with a left of 150px:

Now, let’s take care of the background of the image container and the respective image slices:

.cr‐bgimg div span position: absolute; width: 100%; height: 100%; top: 0px; left: ‐150px; z‐index: 2; text‐indent: ‐9000px;



We also need to give the right background position to the slices depending on the panel:

.cr‐container input.cr‐selector‐img‐1:checked ~ .cr‐bgimg,

.cr‐bgimg div span:nth‐child(1) background‐image: url(../images/1.jpg);.cr‐container input.cr‐selector‐img‐2:checked ~ .cr‐bgimg,.cr‐bgimg div span:nth‐child(2) background‐image: url(../images/2.jpg);.cr‐container input.cr‐selector‐img‐3:checked ~ .cr‐bgimg,.cr‐bgimg div span:nth‐child(3) background‐image: url(../images/3.jpg);.cr‐container input.cr‐selector‐img‐4:checked ~ .cr‐bgimg,.cr‐bgimg div span:nth‐child(4) background‐image: url(../images/4.jpg);



When we click on a label we will simply slide all the slices out to the right:

.cr‐bgimg div:nth‐child(1) span background‐position: 0px 0px;.cr‐bgimg div:nth‐child(2) span background‐position: ‐150px 0px;.cr‐bgimg div:nth‐child(3) span background‐position: ‐300px 0px;.cr‐bgimg div:nth‐child(4) span background‐position: ‐450px 0px;



…all except the slices with the respective background image. Those will slide in from 150px to0px:

.cr‐container input:checked ~ .cr‐bgimg div span animation: slideOut 0.6s ease‐in‐out;@keyframes slideOut 0% left: 0px; 100% left: 150px;

.cr‐container input.cr‐selector‐img‐1:checked ~ .cr‐bgimg div span:nth‐child(1),



.cr‐container input.cr‐selector‐img‐4:checked ~ .cr‐bgimg div span:nth‐child(4) transition: left 0.5s ease‐in‐out; animation: none; left: 0px; z‐index: 10;



Last, but not least, we want to style the h3 title elements and their spans. The h3 will have aopacity transition and once we select the respective label/input the opacity will increase from 0 to1:

.cr‐titles h3 position: absolute; width: 100%; text‐align: center; top: 50%; z‐index: 10000; opacity: 0; color: #fff; text‐shadow: 1px 1px 1px rgba(0,0,0,0.1); transition: opacity 0.8s ease‐in‐out;.cr‐titles h3 span:nth‐child(1) font‐family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans‐serif; font‐size: 70px; display: block; letter‐spacing: 7px;.cr‐titles h3 span:nth‐child(2) letter‐spacing: 0px; display: block; background: rgba(104,171,194,0.9); font‐size: 14px; padding: 10px;



If you don’t want to use the label trick on mobile devices you could, for example, use a mediaquery:

padding: 10px; font‐style: italic; font‐family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;.cr‐container input.cr‐selector‐img‐1:checked ~ .cr‐titles h3:nth‐child(1),.cr‐container input.cr‐selector‐img‐2:checked ~ .cr‐titles h3:nth‐child(2),.cr‐container input.cr‐selector‐img‐3:checked ~ .cr‐titles h3:nth‐child(3),.cr‐container input.cr‐selector‐img‐4:checked ~ .cr‐titles h3:nth‐child(4) opacity: 1;

@media screen and (max‐width: 768px) .cr‐container input display: inline; width: 24%; margin‐top: 350px; z‐index: 1000; position: relative; .cr‐container label display: none;



Related Articles

This is just a quick solution and it might be better to check, if the label trick is supported.

And that’s it! There are many possibilities of animations that can be done here. Check out thedemos to see more.

Demos

1. Demo 1: Slide to right

2. Demo 2: Odd/even slide to left/right

3. Demo 3: Odd/even slide up/down

4. Demo 4: Scale up/down

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

http://tympanus.net/Tutorials/CSS3SlidingImagePanels/index.html

http://tympanus.net/Tutorials/CSS3SlidingImagePanels/index4.html


http://v4.thewatchmakerproject.com/blog/how-to-fix-the-broken-ipad-form-label-click-issue/


sliding image panels with css3

Documents