Translated from
Sliding Image Panels with CSS3
Today we will learn how to use CSS to create a cool image rotation component. Its principle is simply to click the label element to switch the background image and animation effect. The core is the use of radio buttons associated with labels and the use of universal sibling selectors to locate each image.
The end result we want to achieve is this:
The composition of round seeding
HTML is made up of three main parts: radio buttons and labels, a container with four panels and a “slice” for each image, and a caption. A container set to class=” CR-bgIMG “divides each image into four panels, in which the background image is positioned in the appropriate position using the background-position property. So, the first panel will have four slices, each with a picture in the background and located on the leftmost side of the container. The second panel also has four slices, which are located on the right side of the first panel and are used to display the second slice of the image:
<section class="cr-container">
<! -- Radio buttons and label -->
<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>
<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>
<! - panel - >
<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>
<! - the title -- -- >
<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>Copy the codeThe H3 element contains two SPAN elements, one for the main title and one for the subtitle.
CSS
For brevity, the browser prefix is omitted from the CSS, but the code you get is complete.
Our first goal is to trigger the radio button when the label element is clicked, simply by matching the for value of the label element with the ID value of the radio button.
The second step is to position all the background images in the correct position. Third, when the Label label is clicked, the corresponding image slice and title are displayed.
Step by step, first style the outermost Section element and give it a light shadow effect.
.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);
}Copy the codeSince we will later use the generic sibling selector “~” to select the corresponding image slice and title, place all label elements at the top of the code. Make sure that the label element appears above the image and text by setting the Z-index attribute, and make sure that the margin-top attribute keeps them 350px away from the overall border.
.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;
}Copy the codeNext, by adding a small circle to beautify the label element, we create a pseudo-element and place it in the center of the text.
.cr-container label:before{
content:' ';
width: 34px;
height: 34px;
background: rgba,0.9 (130195217);position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;
box-shadow: 0px 0px 0px 4px rgba,0.3 (255255255);z-index: -1;
}Copy the codeTo create a dividing line between panels, we use another pseudo-element of the Label element and extend it from the top edge to the bottom edge of the image with a gradient background.
.cr-container label:after{
width: 1px;
height: 400px;
content: ' ';
background: linear-gradient(top, rgba(255,255,255,0) 0%.rgba(255255255, 1)100%);
position: absolute;
bottom: -20px;
right: 0px;
}Copy the codeThe last panel should not have a divider line on the right side, so we set its width to 0.
.cr-container label.cr-label-img-4:after{
width: 0px;
}Copy the codeNow that the label label is styled, we can hide all the radio buttons.
.cr-container input{
display: none;
}Copy the codeWhen we click on a label element, its corresponding radio button is selected. In turn, you can use the universal sibling selector to select the label element corresponding to the selected button and change its text color.
.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;
}Copy the codeWe can also change the color of the small circle and add a shadow effect.
.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,0.6 (104171194); }Copy the codeThe container of the image will occupy all width and be absolutely positioned. Use this container later to set the background image to the currently selected image. We also need a picture that is visible by default, so add some more 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;
}Copy the codeBecause we have four panels, each with a width of 150 pixels (600 divided by 4). Panels float left to show side by side, and also set them to overflow hide, because we don’t want to see slices come out when sliding:
.cr-bgimg div{
width: 150px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}Copy the codeEach slice is also set to absolute positioning and is shown outside the panel and hidden with left:-150px:
.cr-bgimg div span{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: -150px;
z-index: 2;
text-indent: -9000px;
}Copy the codeAgain, let’s deal with the container and the background image for each slice:
.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); }Copy the codeWe also need to provide different positioning for the background picture of slices according to different panels:
.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;
}Copy the codeWhen we click a Label TAB, we slide all the slices to the right:
.cr-container input:checked ~ .cr-bgimg div span{
animation: slideOut 0.6 s ease-in-out;
}
@keyframes slideOut{
0%{
left: 0px;
}
100%{
left: 150px; }}Copy the codeBut except for the label we selected, the corresponding image slice is slid 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.5 s ease-in-out;
animation: none;
left: 0px;
z-index: 10;
}Copy the codeFinally, set the main and subtitle styles in the H3 label. When we click on a label, the transparency of its corresponding title changes from 0 to 1:
.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.8 s 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,0.9 (104171194);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;
}Copy the codeThat’s it! The effect of slice – round seeding is thus realized. Of course, we can also extend more slice effects through this effect, for example:
Effects of two
The effect of three
The effect of four
