Once again, Mary Lou‘s great CSS3 tutorial shows you how to create a neat sliding image panels. The idea is to use background images as panels, which become animated when you click on the label. Be reminded that this works on browsers that support CSS transitions and animations.

Below are the following codes.

Markup

<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">2</label>

<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />

<label for="select-img-3" class="cr-label-img-3">3</label>

<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />

<label for="select-img-4" class="cr-label-img-4">4</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>

 

CSS

Styling the first section

.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);

}

Placing the labels before the containers, make it sure that they’re on top as layer and push its position down by adding top margin of 350px

.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;

}

Adding little circle on the label

.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;

}

Making a line “fade out” at the top

.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;

}

Give 0 width so that the lst panel should not have line

.cr-container label.cr-label-img-4:after{

width: 0px;

}

Hiding the inputs

.cr-container input{

display: none;

}

Changing the color of ‘selected’ label

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

.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,

.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,

.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{

color: #68abc2;

}

Changing the background color and box shadow of its circle

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

.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,

.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3: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);

}

Adding background properties

.cr-bgimg{

width: 600px;

height: 400px;

position: absolute;

left: 0px;

top: 0px;

z-index: 1;

background-repeat: no-repeat;

background-position: 0 0;

}

Hiding the overflow of the panel which floats from the left

.cr-bgimg div{

width: 150px;

height: 100%;

position: relative;

float: left;

overflow: hidden;

background-repeat: no-repeat;

}

Slices will be hidden by placing them out of the panel with a left of -150px

.cr-bgimg div span{

position: absolute;

width: 100%;

height: 100%;

top: 0px;

left: -150px;

z-index: 2;

text-indent: -9000px;

}

Background image container and image slices

.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);

}

Giving right background position to slices that depends on panel

.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;

}

Sliding the slices to the right when label is clicked

.cr-container input:checked ~ .cr-bgimg div span{

animation: slideOut 0.6s ease-in-out;

}

@keyframes slideOut{

0%{

left: 0px;

}

100%{

left: 150px;

}

}

Except the slices with background image, it will slide in from -150px to 0px

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

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

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

.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;

}

Styling the h3 title elements and its span

.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;

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;

}

You can use media query if you don’t want to use label tricks on your mobile devices

@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;

}

}

Check the demo and download the source file.

To know more about this awesome tutorial, click on the image.

 

Incoming search terms for the article:

• sliding image panels with css3
• sliding image panels
• css3 sliding panel
• css3 sliding image panels download
• css3 slide panel
• css3 panels
• shadow css sliding panel
• css3 sliding panels
• slide panel css3
• liding image panels with