CSS3 achieves cool sliced image carousel effect
|
Today we will learn how to use CSS to create a cool image carousel component. Its principle is simply to switch the background image and animation effects by clicking the label element. The core is to use radio buttons associated with labels and use a universal sibling selector to locate each image. The final effect we want to achieve is this:
Composition of the carousel The HTML consists of three main parts: the radio button and label, the container that contains the four panels and their "slices" for each image, and the title. The container set to class="cr-bgimg" will divide each image into four panels, where the background image is positioned at the appropriate position in each panel through the background-position attribute. So, the first panel will have four slices, each with an image as the background, and will be positioned at the leftmost position of the container. The second panel also has four slices. It is located to the right of the first panel and is used to display the second slice portion of the image: <section class="cr-container">
<!-- Radio button and label tag-->
<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>
Slice 2 - Image 2
<span>Slice 2 - Image 3</span>
Slice 2 - Image 4
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
Slice 3 - Image 3
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
Slice 4 - Image 2
Slice 4 - Image 3
Slice 4 - Image 4
</div>
</div>
<!-- Title -->
<div class="cr-titles">
<h3>
Serendipity
<span>What you've been dreaming of</span>
</h3>
<h3>
<span>Adventure</span>
Where the fun begins
</h3>
<h3>
<span>Nature</span>
Unforgettable eperiences
</h3>
<h3>
<span>Serenity</span>
<span>When silence touches nature</span>
</h3>
</div>
</section>The h3 element contains two span elements, one is the main title and the other is the subtitle. CSS For the sake of simplicity, browser prefixes are omitted in the CSS of this article, but the code you get is complete. Our first goal is to trigger the corresponding radio button when clicking the label element. The method is very simple, just match the for attribute value of the label element with the ID value of the radio button. In the second step, we need to position all the background images in the correct position. The third step is to display the corresponding image slice and title when you click the label. Let's look at it step by step. First, set the style of 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);
}Because we will use the universal sibling selector "~" to select the corresponding image slices and titles later, we put all the label elements at the top of the code. Make sure the label element is displayed above the image and text by setting the z-index property, and keep them 350px from the overall top border using the margin-top property. .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;
}Next, let’s add 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(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;
}To create a separator line between the panels, we use another pseudo-element of the label element and extend it from the top edge of the image to the bottom edge with a gradient background. .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;
}The last panel should not have a divider on the right side, so we set its width to 0. .cr-container label.cr-label-img-4:after{
width: 0px;
}Now that the label style is complete, we can hide all the radio buttons. .cr-container input{
display: none;
}When we click a label element, its corresponding radio button is selected. Conversely, 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;
}We 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(104,171,194,0.6);
}The image's container will take up the entire width and will be absolutely positioned. This container is later used to set the background image to the currently selected image. We also need an image that is visible by default, so let's add some 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;
}Since we have four panels, each panel is 150 pixels wide (600 divided by 4). The panels are set to float left so they are displayed side by side, and their overflow is set to be hidden because we don’t want to see the slices come out when sliding: .cr-bgimg div{
width: 150px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}Each slice is also set to absolute positioning and left:-150px to display them outside the panel and hide them: .cr-bgimg div span{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: -150px;
z-index: 2;
text-indent: -9000px;
}Next, let's handle the background images for the container and 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);
}We also need to provide different positioning for the slice background image according to the 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;
}When we click a label, we slide all the slices to the right: .cr-container input:checked ~ .cr-bgimg div span{
animation: slideOut 0.6s ease-in-out;
}
@keyframes slideOut{
0%{
left: 0px;
}
100%{
left: 150px;
}
}But except for the label tag we selected, its corresponding image slice slides 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;
}Finally, set the style of the main and subtitles in the h3 tag. When we click on a label tag, the transparency of its corresponding title will transition 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.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;
}That's it! The sliced carousel effect is achieved in this way. Of course, we can also extend more slicing effects through this effect, such as: Effect 2
Effect three
Effect 4
Summarize The above is the editor's introduction to the cool sliced image carousel effect achieved with CSS3. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: How to implement checkbox & radio alignment
>>: DOCTYPE Document Type Declaration (Must-Read for Web Page Lovers)
Recommend
Mysql optimization techniques for querying dates based on time
For example, to query yesterday's newly regis...
Centos7.3 automatically starts or executes specified commands when booting
In centos7, the permissions of the /etc/rc.d/rc.l...
MySQL Series 11 Logging
Tutorial Series MySQL series: Basic concepts of M...
MySQL 5.7.17 installation and configuration method graphic tutorial under win7
I would like to share with you the graphic tutori...
MySQL 5.7.27 installation and configuration method graphic tutorial
The installation tutorial of MySQL 5.7.27 is reco...
MySQL 8.0 New Features - Introduction to the Use of Management Port
Table of contents Preface Connection Management A...
A brief discussion on the corresponding versions of node node-sass sass-loader
Table of contents The node version does not corre...
Examples of using MySQL covering indexes
What is a covering index? Creating an index that ...
Javascript asynchronous programming: Do you really understand Promise?
Table of contents Preface Basic Usage grammar Err...
Detailed explanation of top command output in Linux
Preface I believe everyone has used the top comma...
How to call a piece of HTML code together on multiple HTML pages
Method 1: Use script method: Create a common head...
【Web Design】Share E-WebTemplates exquisite foreign web page templates (FLASH+PSD source file+HTML)
They are all web page templates from the foreign ...
Learn the principles and common operations of MySQL partition tables through examples
1. Meaning of partition table A partition table d...
Mysql query the most recent record of the sql statement (optimization)
The worst option is to sort the results by time a...
Suggestions on creating business HTML emails
Through permission-based email marketing, not onl...