Slider with Image ToolTip on Dots & Animations
Before We Start to Slider with Image ToolTip on Dots & Animations
Slider with Image ToolTip on Dots & Animations can be used to create an user attractive UI components for website designing.
So if you are a person who wishes to develop a website, you have to know how to create these kind of components and animations properly.
How to create Slider with Image ToolTip on Dots & Animations? We are here to solve your problem. In this article we discuss how to create a hover effect animations. Before we start please read the below articles which easier you to understand the process, if you are new to development.
Step 1 – Add HTML
It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag as below.
<body>
<section class="py-4">
<div class="container flex-center">
<div class='slider_cus autoplay'>
<input name="slider_anc1" id='slider_c1_0' type="radio" class='slider_anc slide'>
<input name="slider_anc1" id='slider_c1_1' type="radio" class='slider_anc slide'>
<input name="slider_anc1" id='slider_c1_2' type="radio" class='slider_anc slide'>
<input name="slider_anc1" id='slider_play1' type="radio" class='slider_anc' checked>
<input name="slider_anc1" id='slider_pause1' type="radio" class='slider_anc'>
<ul>
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
<img src="https://media.istockphoto.com/id/1335295270/photo/global-connection.jpg?s=612x612&w=0&k=20&c=pVIatR8XcihqKTDnISYXNWvSkpZkdeJJa3YNfk9zC6g=" style="width: 100%;">
</div>
<li class='num0 img'>
<a href="javascript:void(0)" target=""><img src='https://media.istockphoto.com/id/1335295270/photo/global-connection.jpg?s=612x612&w=0&k=20&c=pVIatR8XcihqKTDnISYXNWvSkpZkdeJJa3YNfk9zC6g=' alt='Title' title='Title' /> </a>
</li>
<li class='num1 img'>
<a href="javascript:void(0)" target=""><img src='https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg' alt='Title' title='Title' /> </a>
</li>
<li class='num2 img'>
<a href="javascript:void(0)" target=""><img src='https://media.istockphoto.com/id/1335295270/photo/global-connection.jpg?s=612x612&w=0&k=20&c=pVIatR8XcihqKTDnISYXNWvSkpZkdeJJa3YNfk9zC6g=' alt='Title' title='Title' /> </a>
</li>
</ul>
<div class='slider_description'>
<label class='num0'>
<span class="slider_title"><span class="slider_wrapper">Title1</span></span>
</label>
<label class='num1'>
<span class="slider_title"><span class="slider_wrapper">Title2</span></span>
</label>
<label class='num2'>
<span class="slider_title"><span class="slider_wrapper">Title3</span></span>
</label>
</div>
<div class='slider_arrowprev'>
<label class='num0' for='slider_c1_0'></label>
<label class='num1' for='slider_c1_1'></label>
<label class='num2' for='slider_c1_2'></label>
</div>
<div class='slider_arrownext'>
<label class='num0' for='slider_c1_0'></label>
<label class='num1' for='slider_c1_1'></label>
<label class='num2' for='slider_c1_2'></label>
</div>
<div class='slider_bullets'>
<label class='num0' for='slider_c1_0'>
<span class='slider_point'></span>
<span class='slider_thumb'><img src='https://media.istockphoto.com/id/1335295270/photo/global-connection.jpg?s=612x612&w=0&k=20&c=pVIatR8XcihqKTDnISYXNWvSkpZkdeJJa3YNfk9zC6g=' alt='Buns' title='Buns' /></span>
</label>
<label class='num1' for='slider_c1_1'>
<span class='slider_point'></span>
<span class='slider_thumb'><img src='https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg' alt='Croissant' title='Croissant' /></span>
</label>
<label class='num2' for='slider_c1_2'>
<span class='slider_point'></span>
<span class='slider_thumb'><img src='https://media.istockphoto.com/id/1335295270/photo/global-connection.jpg?s=612x612&w=0&k=20&c=pVIatR8XcihqKTDnISYXNWvSkpZkdeJJa3YNfk9zC6g=' alt='Lemon pie' title='Lemon pie' /></span>
</label>
</div>
</div>
</div>
</section>
</body>
Step 2 – Add CSS
We use some external CSS link to this code. No need to worry about this, copy and paste below code between <head></head> tag.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
Copy and paste below code in your HTML editor between <style></style> tag as below.
<style>
.flex-center {
display: flex;
justify-content: center;
}
.text-1 {
font-family: Roboto;
}
.text-1 a {
color: #000000;
text-decoration: none;
}
.slider_cus {
display: inline-block;
position: relative;
max-width: 480px;
width: 100%;
margin-top: 10px;
}
.slider_cus>.slider_anc {
display: none;
}
.slider_cus>ul {
position: relative;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
.slider_cus>ul>li.img img {
width: 100%;
}
.slider_cus>ul>li.img {
font-size: 0pt;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
.slider_cus>ul>li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
white-space: normal;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slider_cus .slider_lnk {
position: absolute;
top: -9999px;
left: -9999px;
font-size: 0pt;
opacity: 0;
filter: alpha(opacity=0);
}
.slider_cus>.slider_arrowprev,
.slider_cus>.slider_arrownext {
position: absolute;
top: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 5;
}
.slider_cus>.slider_arrowprev>label,
.slider_cus>.slider_arrownext>label {
position: absolute;
text-decoration: none;
cursor: pointer;
opacity: 0;
z-index: -1;
}
.slider_cus>.slider_arrowprev {
left: 0;
}
.slider_cus>.slider_arrownext {
right: 0;
}
.slider_cus>.slider_arrowprev>label.num2,
.slider_cus>.slider_arrownext>label.num1 {
opacity: 1;
z-index: 5;
}
.slider_cus>.slide:checked~.slider_arrowprev>label,
.slider_cus>.slide:checked~.slider_arrownext>label {
opacity: 0;
z-index: -1;
}
.slider_cus>#slider_c1_0:checked~.slider_arrowprev>label.num2,
.slider_cus>#slider_c1_0:checked~.slider_arrownext>label.num1,
.slider_cus>#slider_c1_1:checked~.slider_arrowprev>label.num0,
.slider_cus>#slider_c1_1:checked~.slider_arrownext>label.num2,
.slider_cus>#slider_c1_2:checked~.slider_arrowprev>label.num1,
.slider_cus>#slider_c1_2:checked~.slider_arrownext>label.num0 {
opacity: 1;
z-index: 5;
}
/* calculate autoplay */
@-webkit-keyframes arrow {
0%,
33.32333333333334% {
opacity: 1;
z-index: 5;
}
33.333333333333336%,
100% {
opacity: 0;
z-index: -1;
}
}
@-moz-keyframes arrow {
0%,
33.32333333333334% {
opacity: 1;
z-index: 5;
}
33.333333333333336%,
100% {
opacity: 0;
z-index: -1;
}
}
@-ms-keyframes arrow {
0%,
33.32333333333334% {
opacity: 1;
z-index: 5;
}
33.333333333333336%,
100% {
opacity: 0;
z-index: -1;
}
}
@-o-keyframes arrow {
0%,
33.32333333333334% {
opacity: 1;
z-index: 5;
}
33.333333333333336%,
100% {
opacity: 0;
z-index: -1;
}
}
@keyframes arrow {
0%,
33.32333333333334% {
opacity: 1;
z-index: 5;
}
33.333333333333336%,
100% {
opacity: 0;
z-index: -1;
}
}
.slider_cus>#slider_play1:checked~.slider_arrowprev>label.num2,
.slider_cus>#slider_play1:checked~.slider_arrownext>label.num1,
.slider_cus>#slider_pause1:checked~.slider_arrowprev>label.num2,
.slider_cus>#slider_pause1:checked~.slider_arrownext>label.num1 {
-webkit-animation: arrow 24000ms infinite -2000ms;
-moz-animation: arrow 24000ms infinite -2000ms;
-ms-animation: arrow 24000ms infinite -2000ms;
-o-animation: arrow 24000ms infinite -2000ms;
animation: arrow 24000ms infinite -2000ms;
}
.slider_cus>#slider_play1:checked~.slider_arrowprev>label.num0,
.slider_cus>#slider_play1:checked~.slider_arrownext>label.num2,
.slider_cus>#slider_pause1:checked~.slider_arrowprev>label.num0,
.slider_cus>#slider_pause1:checked~.slider_arrownext>label.num2 {
-webkit-animation: arrow 24000ms infinite 6000ms;
-moz-animation: arrow 24000ms infinite 6000ms;
-ms-animation: arrow 24000ms infinite 6000ms;
-o-animation: arrow 24000ms infinite 6000ms;
animation: arrow 24000ms infinite 6000ms;
}
.slider_cus>#slider_play1:checked~.slider_arrowprev>label.num1,
.slider_cus>#slider_play1:checked~.slider_arrownext>label.num0,
.slider_cus>#slider_pause1:checked~.slider_arrowprev>label.num1,
.slider_cus>#slider_pause1:checked~.slider_arrownext>label.num0 {
-webkit-animation: arrow 24000ms infinite 14000ms;
-moz-animation: arrow 24000ms infinite 14000ms;
-ms-animation: arrow 24000ms infinite 14000ms;
-o-animation: arrow 24000ms infinite 14000ms;
animation: arrow 24000ms infinite 14000ms;
}
.slider_cus.slider_pauseHover:hover>.slider_arrowprev>label,
.slider_cus>#slider_pause1:checked~.slider_arrowprev>label,
.slider_cus.slider_pauseHover:hover>.slider_arrownext>label,
.slider_cus>#slider_pause1:checked~.slider_arrownext>label {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.slider_cus>.slide:checked~.slider_arrowprev>label,
.slider_cus>.slide:checked~.slider_arrownext>label {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.slider_cus>.slider_bullets {
position: absolute;
left: 0;
width: 100%;
z-index: 6;
font-size: 0;
line-height: 8pt;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slider_cus>.slider_bullets>div {
margin-left: -50%;
width: 100%;
}
.slider_cus>.slider_bullets>label {
position: relative;
display: inline-block;
cursor: pointer;
}
.slider_cus>.slider_bullets>label>.slider_thumb {
visibility: hidden;
position: absolute;
opacity: 0;
z-index: 1;
line-height: 0;
left: -44px;
top: -48px;
}
.slider_cus>.slider_description {
z-index: 3;
}
.slider_cus>.slider_description a,
.slider_cus>.slider_description a:visited,
.slider_cus>.slider_description a:active {
color: inherit;
}
.slider_cus>.slider_description a:hover {
text-decoration: none;
}
.slider_cus>.slider_description>label {
position: absolute;
word-wrap: break-word;
white-space: normal;
text-align: left;
max-width: 50%;
left: 0;
}
.slider_cus>.slider_description>label>span {
vertical-align: top;
}
.slider_cus>.slider_description>label span {
display: inline-block;
}
.slider_cus>ul>li {
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2000ms ease, -webkit-transform 24000ms linear;
-moz-transition: opacity 2000ms ease, -moz-transform 24000ms linear;
-ms-transition: opacity 2000ms ease, -ms-transform 24000ms linear;
-o-transition: opacity 2000ms ease, -o-transform 24000ms linear;
transition: opacity 2000ms ease, transform 24000ms linear;
}
.slider_cus>ul>li.num0 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, 11.53846%);
transform: scale(1.3) translate(-11.53846%, 11.53846%);
}
.slider_cus>ul>li.num1 {
opacity: 0;
-webkit-transform: scale(1.3) translate(11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(11.53846%, 11.53846%);
transform: scale(1.3) translate(11.53846%, 11.53846%);
}
.slider_cus>ul>li.num2 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, -11.53846%);
transform: scale(1.3) translate(-11.53846%, -11.53846%);
}
.slider_cus>ul>li.num0 {
opacity: 1;
z-index: 2;
}
.slider_cus>.slide:checked~ul>li.num0 {
opacity: 0;
z-index: 1;
}
.slider_cus>#slider_c1_0:checked~ul>li.num0,
.slider_cus>#slider_c1_1:checked~ul>li.num1,
.slider_cus>#slider_c1_2:checked~ul>li.num2 {
opacity: 1;
-webkit-transform: scale(1) translate(0, 0);
-moz-transform: scale(1) translate(0, 0);
-ms-transform: scale(1) translate(0, 0);
-o-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
z-index: 2;
}
/* calculate autoplay */
@-webkit-keyframes kenbernsBR {
0%,
100% {
-webkit-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-webkit-transform: scale(1.3) translate(11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
@-moz-keyframes kenbernsBR {
0%,
100% {
-moz-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-moz-transform: scale(1.3) translate(11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
@-ms-keyframes kenbernsBR {
0%,
100% {
-ms-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-ms-transform: scale(1.3) translate(11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
@-o-keyframes kenbernsBR {
0%,
100% {
-o-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-o-transform: scale(1.3) translate(11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
@keyframes kenbernsBR {
0%,
100% {
transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
transform: scale(1.3) translate(11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
@-webkit-keyframes kenbernsBL {
0%,
100% {
-webkit-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-webkit-transform: scale(1.3) translate(11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@-moz-keyframes kenbernsBL {
0%,
100% {
-moz-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-moz-transform: scale(1.3) translate(11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@-ms-keyframes kenbernsBL {
0%,
100% {
-ms-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-ms-transform: scale(1.3) translate(11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@-o-keyframes kenbernsBL {
0%,
100% {
-o-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-o-transform: scale(1.3) translate(11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@keyframes kenbernsBL {
0%,
100% {
transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
transform: scale(1.3) translate(11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@-webkit-keyframes kenbernsTL {
0%,
100% {
-webkit-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@-moz-keyframes kenbernsTL {
0%,
100% {
-moz-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-moz-transform: scale(1.3) translate(-11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@-ms-keyframes kenbernsTL {
0%,
100% {
-ms-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-ms-transform: scale(1.3) translate(-11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@-o-keyframes kenbernsTL {
0%,
100% {
-o-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-o-transform: scale(1.3) translate(-11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@keyframes kenbernsTL {
0%,
100% {
transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
transform: scale(1.3) translate(-11.53846%, -11.53846%);
opacity: 0;
z-index: 2;
}
}
@-webkit-keyframes kenbernsTR {
0%,
100% {
-webkit-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
@-moz-keyframes kenbernsTR {
0%,
100% {
-moz-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-moz-transform: scale(1.3) translate(-11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
@-ms-keyframes kenbernsTR {
0%,
100% {
-ms-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-ms-transform: scale(1.3) translate(-11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
@-o-keyframes kenbernsTR {
0%,
100% {
-o-transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
-o-transform: scale(1.3) translate(-11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
@keyframes kenbernsTR {
0%,
100% {
transform: scale(1);
opacity: 0;
}
8.333333333333334%,
33.333333333333336% {
opacity: 1;
}
41.66666666666667%,
66.66666666666666% {
transform: scale(1.3) translate(-11.53846%, 11.53846%);
opacity: 0;
z-index: 2;
}
}
.slider_cus>#slider_play1:checked~ul>li.num0,
.slider_cus>#slider_pause1:checked~ul>li.num0 {
-webkit-animation: kenbernsTR 24000ms infinite -2000ms linear;
-moz-animation: kenbernsTR 24000ms infinite -2000ms linear;
-ms-animation: kenbernsTR 24000ms infinite -2000ms linear;
-o-animation: kenbernsTR 24000ms infinite -2000ms linear;
animation: kenbernsTR 24000ms infinite -2000ms linear;
}
.slider_cus>#slider_play1:checked~ul>li.num1,
.slider_cus>#slider_pause1:checked~ul>li.num1 {
-webkit-animation: kenbernsBR 24000ms infinite 6000ms linear;
-moz-animation: kenbernsBR 24000ms infinite 6000ms linear;
-ms-animation: kenbernsBR 24000ms infinite 6000ms linear;
-o-animation: kenbernsBR 24000ms infinite 6000ms linear;
animation: kenbernsBR 24000ms infinite 6000ms linear;
}
.slider_cus>#slider_play1:checked~ul>li.num2,
.slider_cus>#slider_pause1:checked~ul>li.num2 {
-webkit-animation: kenbernsTL 24000ms infinite 14000ms linear;
-moz-animation: kenbernsTL 24000ms infinite 14000ms linear;
-ms-animation: kenbernsTL 24000ms infinite 14000ms linear;
-o-animation: kenbernsTL 24000ms infinite 14000ms linear;
animation: kenbernsTL 24000ms infinite 14000ms linear;
}
.slider_cus>#slider_play1:checked~ul>li,
.slider_cus>#slider_pause1:checked~ul>li {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.slider_cus.slider_pauseHover:hover>ul>li,
.slider_cus>#slider_pause1:checked~ul>li {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.slider_cus>.slide:checked~ul>li {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.slider_cus {
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
}
.slider_cus>.slider_play_pause {
-webkit-transition: 0.5s opacity 0s ease;
-moz-transition: 0.5s opacity 0s ease;
-ms-transition: 0.5s opacity 0s ease;
-o-transition: 0.5s opacity 0s ease;
transition: 0.5s opacity 0s ease;
}
.slider_cus>.slider_arrowprev {
-webkit-transition: 0.5s opacity 0.15s ease,
0.5s -webkit-transform 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: 0.5s opacity 0.15s ease,
0.5s -moz-transform 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: 0.5s opacity 0.15s ease,
0.5s -ms-transform 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: 0.5s opacity 0.15s ease,
0.5s -o-transform 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: 0.5s opacity 0.15s ease,
0.5s transform 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.slider_cus>.slider_arrownext {
-webkit-transition: 0.5s opacity 0.3s ease,
0.5s -webkit-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: 0.5s opacity 0.3s ease,
0.5s -moz-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: 0.5s opacity 0.3s ease,
0.5s -ms-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: 0.5s opacity 0.3s ease,
0.5s -o-transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: 0.5s opacity 0.3s ease,
0.5s transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.slider_cus>.slider_arrowprev,
.slider_cus>.slider_arrownext,
.slider_cus>.slider_play_pause {
opacity: 0;
}
.slider_cus:hover>.slider_arrowprev,
.slider_cus:hover>.slider_arrownext,
.slider_cus:hover>.slider_play_pause {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.slider_cus>.slider_arrowprev>label,
.slider_cus>.slider_arrownext>label {
overflow: hidden;
margin-top: -35px;
width: 40px;
height: 70px;
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0, 0, 0, 0.6);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider_cus>.slider_arrowprev {
left: 70px;
}
.slider_cus>.slider_arrownext {
right: 70px;
}
.slider_cus>.slider_arrowprev>label {
right: 0;
}
.slider_cus>.slider_arrownext>label {
left: 0;
}
.slider_cus>.slider_arrowprev>label:after {
content: "\e800";
}
.slider_cus>.slider_arrownext>label:after {
content: "\e801";
}
.slider_cus>.slider_arrowprev>label:after,
.slider_cus>.slider_arrownext>label:after {
display: block;
font: 40px "demurecontrols";
text-align: center;
line-height: 76px;
color: #fff;
}
.slider_cus>.slider_arrowprev>label,
.slider_cus>.slider_arrownext>label {
-webkit-transition: 300ms width ease, 300ms margin-left ease,
300ms background-color ease;
-moz-transition: 300ms width ease, 300ms margin-left ease,
300ms background-color ease;
-ms-transition: 300ms width ease, 300ms margin-left ease,
300ms background-color ease;
-o-transition: 300ms width ease, 300ms margin-left ease,
300ms background-color ease;
transition: 300ms width ease, 300ms margin-left ease,
300ms background-color ease;
}
.slider_cus>.slider_arrowprev:hover>label {
background-color: #e34b64;
width: 70px;
}
.slider_cus>.slider_arrownext:hover>label {
background-color: #e34b64;
width: 70px;
}
.slider_cus>.slider_bullets {
bottom: 5px;
margin-bottom: 5px;
}
.slider_cus>.slider_bullets>label {
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
}
.slider_cus>.slider_bullets>label>.slider_thumb {
border: 3px solid #e34b64;
margin-top: -11px;
-webkit-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
-webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
visibility 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
-moz-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
visibility 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
-ms-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
visibility 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-o-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
-o-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
visibility 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
visibility 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transform-origin: 0% 100% 0px;
-moz-transform-origin: 0% 100% 0px;
-ms-transform-origin: 0% 100% 0px;
-o-transform-origin: 0% 100% 0px;
transform-origin: 0% 100% 0px;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.slider_cus>.slider_bullets>label>.slider_thumb:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 50%;
margin-left: -1px;
bottom: -8px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #e34b64;
}
.slider_cus>.slider_bullets>label:hover>.slider_thumb {
visibility: visible;
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.slider_cus>.slider_bullets>label {
margin: 0 6px;
padding: 9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0, 0, 0, 0.6);
}
.slider_cus>.slider_bullets>label.num0 {
background-color: #e34b64;
}
.slider_cus>.slide:checked~.slider_bullets>label {
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0, 0, 0, 0.6);
}
.slider_cus>#slider_c1_0:checked~.slider_bullets>label.num0,
.slider_cus>#slider_c1_1:checked~.slider_bullets>label.num1,
.slider_cus>#slider_c1_2:checked~.slider_bullets>label.num2 {
background-color: #e34b64;
}
.slider_cus>.slider_bullets>label:hover {
background-color: #e34b64;
}
/* calculate autoplay */
@-webkit-keyframes bullet {
0%,
33.32333333333334% {
background-color: #e34b64;
}
33.333333333333336%,
100% {
background: #000;
background-color: rgba(0, 0, 0, 0.6);
}
}
@-moz-keyframes bullet {
0%,
33.32333333333334% {
background-color: #e34b64;
}
33.333333333333336%,
100% {
background: #000;
background-color: rgba(0, 0, 0, 0.6);
}
}
@-ms-keyframes bullet {
0%,
33.32333333333334% {
background-color: #e34b64;
}
33.333333333333336%,
100% {
background: #000;
background-color: rgba(0, 0, 0, 0.6);
}
}
@-o-keyframes bullet {
0%,
33.32333333333334% {
background-color: #e34b64;
}
33.333333333333336%,
100% {
background: #000;
background-color: rgba(0, 0, 0, 0.6);
}
}
@keyframes bullet {
0%,
33.32333333333334% {
background-color: #e34b64;
}
33.333333333333336%,
100% {
background: #000;
background-color: rgba(0, 0, 0, 0.6);
}
}
.slider_cus>#slider_play1:checked~.slider_bullets>label.num0,
.slider_cus>#slider_pause1:checked~.slider_bullets>label.num0 {
-webkit-animation: bullet 24000ms infinite -2000ms;
-moz-animation: bullet 24000ms infinite -2000ms;
-ms-animation: bullet 24000ms infinite -2000ms;
-o-animation: bullet 24000ms infinite -2000ms;
animation: bullet 24000ms infinite -2000ms;
}
.slider_cus>#slider_play1:checked~.slider_bullets>label.num1,
.slider_cus>#slider_pause1:checked~.slider_bullets>label.num1 {
-webkit-animation: bullet 24000ms infinite 6000ms;
-moz-animation: bullet 24000ms infinite 6000ms;
-ms-animation: bullet 24000ms infinite 6000ms;
-o-animation: bullet 24000ms infinite 6000ms;
animation: bullet 24000ms infinite 6000ms;
}
.slider_cus>#slider_play1:checked~.slider_bullets>label.num2,
.slider_cus>#slider_pause1:checked~.slider_bullets>label.num2 {
-webkit-animation: bullet 24000ms infinite 14000ms;
-moz-animation: bullet 24000ms infinite 14000ms;
-ms-animation: bullet 24000ms infinite 14000ms;
-o-animation: bullet 24000ms infinite 14000ms;
animation: bullet 24000ms infinite 14000ms;
}
.slider_cus>#slider_play1:checked~.slider_bullets>label,
.slider_cus>#slider_pause1:checked~.slider_bullets>label {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.slider_cus.slider_pauseHover:hover>.slider_bullets>label,
.slider_cus>#slider_pause1:checked~.slider_bullets>label {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.slider_cus>.slide:checked~.slider_bullets>label {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.slider_cus>.slider_description>label {
font: 20px "Roboto", sans-serif;
line-height: normal;
bottom: 35px;
left: 20px;
top: auto;
opacity: 1;
z-index: 1;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
}
.slider_cus>.slider_description>label>span {
margin: 1px 10px;
padding: 10px;
color: #fff;
overflow: hidden;
-webkit-transform-origin: 0% 0% 0px;
-moz-transform-origin: 0% 0% 0px;
-ms-transform-origin: 0% 0% 0px;
-o-transform-origin: 0% 0% 0px;
transform-origin: 0% 0% 0px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.slider_cus>#slider_c1_0:checked~.slider_description>.num0,
.slider_cus>#slider_c1_1:checked~.slider_description>.num1,
.slider_cus>#slider_c1_2:checked~.slider_description>.num2 {
z-index: 2;
}
.slider_cus>#slider_c1_0:checked~.slider_description>.num0>.slider_descr,
.slider_cus>#slider_c1_1:checked~.slider_description>.num1>.slider_descr,
.slider_cus>#slider_c1_2:checked~.slider_description>.num2>.slider_descr {
opacity: 1;
visibility: visible;
-webkit-transition: 750ms opacity 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -webkit-transform 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: 750ms opacity 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -moz-transform 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: 750ms opacity 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -ms-transform 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: 750ms opacity 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -o-transform 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: 750ms opacity 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms transform 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1350ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.slider_cus>#slider_c1_0:checked~.slider_description>.num0>.slider_title,
.slider_cus>#slider_c1_1:checked~.slider_description>.num1>.slider_title,
.slider_cus>#slider_c1_2:checked~.slider_description>.num2>.slider_title {
opacity: 1;
visibility: visible;
-webkit-transition: 750ms opacity 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -webkit-transform 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1200ms ease;
-moz-transition: 750ms opacity 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -moz-transform 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1200ms ease;
-ms-transition: 750ms opacity 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -ms-transform 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1200ms ease;
-o-transition: 750ms opacity 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -o-transform 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1200ms ease;
transition: 750ms opacity 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms transform 1200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 1200ms ease;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.slider_cus>#slider_c1_0:checked~.slider_description>.num0 .slider_wrapper,
.slider_cus>#slider_c1_1:checked~.slider_description>.num1 .slider_wrapper,
.slider_cus>#slider_c1_2:checked~.slider_description>.num2 .slider_wrapper {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.slider_cus>.slider_description>label>.slider_title {
margin: 0px 10px;
opacity: 0;
visibility: hidden;
z-index: 2;
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0, 0, 0, 0.6);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transition: 750ms opacity 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -webkit-transform 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 975ms ease;
-moz-transition: 750ms opacity 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -moz-transform 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 975ms ease;
-ms-transition: 750ms opacity 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -ms-transform 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 975ms ease;
-o-transition: 750ms opacity 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -o-transform 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 975ms ease;
transition: 750ms opacity 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms transform 975ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 975ms ease;
}
.slider_cus>.slider_description>label>.slider_descr {
font-size: 0.8em;
margin: 1px 10px;
opacity: 0;
visibility: hidden;
z-index: 1;
background-color: #e34b64;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transition: 750ms opacity 750ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -webkit-transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: 750ms opacity 750ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -moz-transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: 750ms opacity 750ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -ms-transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: 750ms opacity 750ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -o-transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: 750ms opacity 750ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms visibility 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.slider_cus>.slider_description>label>.slider_title>.slider_wrapper {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: 750ms opacity 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -webkit-transform 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: 750ms opacity 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -moz-transform 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: 750ms opacity 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -ms-transform 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: 750ms opacity 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -o-transform 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: 750ms opacity 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms transform 1450ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.slider_cus>.slider_description>label>.slider_descr>.slider_wrapper {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 750ms opacity 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -webkit-transform 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: 750ms opacity 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -moz-transform 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-ms-transition: 750ms opacity 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -ms-transform 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition: 750ms opacity 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms -o-transform 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: 750ms opacity 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
750ms transform 1675ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* calculate autoplay */
@-webkit-keyframes slider_descrWrapper {
1.53125%,
35.520833333333336% {
z-index: 2;
}
35.530833333333334%,
100% {
z-index: 0;
}
}
@-moz-keyframes slider_descrWrapper {
1.53125%,
35.520833333333336% {
z-index: 2;
}
35.530833333333334%,
100% {
z-index: 0;
}
}
@-ms-keyframes slider_descrWrapper {
1.53125%,
35.520833333333336% {
z-index: 2;
}
35.530833333333334%,
100% {
z-index: 0;
}
}
@-o-keyframes slider_descrWrapper {
1.53125%,
35.520833333333336% {
z-index: 2;
}
35.530833333333334%,
100% {
z-index: 0;
}
}
@keyframes slider_descrWrapper {
1.53125%,
35.520833333333336% {
z-index: 2;
}
35.530833333333334%,
100% {
z-index: 0;
}
}
.slider_cus>#slider_play1:checked~.slider_description>.num0 {
-webkit-animation: slider_descrWrapper 24000ms infinite -1400ms ease;
-moz-animation: slider_descrWrapper 24000ms infinite -1400ms ease;
-ms-animation: slider_descrWrapper 24000ms infinite -1400ms ease;
-o-animation: slider_descrWrapper 24000ms infinite -1400ms ease;
animation: slider_descrWrapper 24000ms infinite -1400ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num1 {
-webkit-animation: slider_descrWrapper 24000ms infinite 6600ms ease;
-moz-animation: slider_descrWrapper 24000ms infinite 6600ms ease;
-ms-animation: slider_descrWrapper 24000ms infinite 6600ms ease;
-o-animation: slider_descrWrapper 24000ms infinite 6600ms ease;
animation: slider_descrWrapper 24000ms infinite 6600ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num2 {
-webkit-animation: slider_descrWrapper 24000ms infinite 14600ms ease;
-moz-animation: slider_descrWrapper 24000ms infinite 14600ms ease;
-ms-animation: slider_descrWrapper 24000ms infinite 14600ms ease;
-o-animation: slider_descrWrapper 24000ms infinite 14600ms ease;
animation: slider_descrWrapper 24000ms infinite 14600ms ease;
}
@-webkit-keyframes slider_title {
1.53125%,
31.792083333333334% {
opacity: 1;
-webkit-transform: rotateX(-9deg);
z-index: 2;
visibility: visible;
}
2.1875%,
31.135833333333334% {
opacity: 1;
-webkit-transform: rotateX(0deg);
z-index: 2;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
-webkit-transform: rotateX(90deg);
z-index: 2;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
@-moz-keyframes slider_title {
1.53125%,
31.792083333333334% {
opacity: 1;
-moz-transform: rotateX(-9deg);
z-index: 2;
visibility: visible;
}
2.1875%,
31.135833333333334% {
opacity: 1;
-moz-transform: rotateX(0deg);
z-index: 2;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
-moz-transform: rotateX(90deg);
z-index: 2;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
@-ms-keyframes slider_title {
1.53125%,
31.792083333333334% {
opacity: 1;
-ms-transform: rotateX(-9deg);
z-index: 2;
visibility: visible;
}
2.1875%,
31.135833333333334% {
opacity: 1;
-ms-transform: rotateX(0deg);
z-index: 2;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
-ms-transform: rotateX(90deg);
z-index: 2;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
@-o-keyframes slider_title {
1.53125%,
31.792083333333334% {
opacity: 1;
-o-transform: rotateX(-9deg);
z-index: 2;
visibility: visible;
}
2.1875%,
31.135833333333334% {
opacity: 1;
-o-transform: rotateX(0deg);
z-index: 2;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
-o-transform: rotateX(90deg);
z-index: 2;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
@keyframes slider_title {
1.53125%,
31.792083333333334% {
opacity: 1;
transform: rotateX(-9deg);
z-index: 2;
visibility: visible;
}
2.1875%,
31.135833333333334% {
opacity: 1;
transform: rotateX(0deg);
z-index: 2;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
transform: rotateX(90deg);
z-index: 2;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
@-webkit-keyframes slider_descr {
3.0625%,
29.604583333333334% {
opacity: 1;
-webkit-transform: rotateX(9deg);
z-index: 1;
visibility: visible;
}
4.375%,
28.948333333333334% {
opacity: 1;
-webkit-transform: rotateX(0deg);
z-index: 1;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
-webkit-transform: rotateX(-90deg);
z-index: 1;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
@-moz-keyframes slider_descr {
3.0625%,
29.604583333333334% {
opacity: 1;
-moz-transform: rotateX(9deg);
z-index: 1;
visibility: visible;
}
4.375%,
28.948333333333334% {
opacity: 1;
-moz-transform: rotateX(0deg);
z-index: 1;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
-moz-transform: rotateX(-90deg);
z-index: 1;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
@-ms-keyframes slider_descr {
3.0625%,
29.604583333333334% {
opacity: 1;
-ms-transform: rotateX(9deg);
z-index: 1;
visibility: visible;
}
4.375%,
28.948333333333334% {
opacity: 1;
-ms-transform: rotateX(0deg);
z-index: 1;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
-ms-transform: rotateX(-90deg);
z-index: 1;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
@-o-keyframes slider_descr {
3.0625%,
29.604583333333334% {
opacity: 1;
-o-transform: rotateX(9deg);
z-index: 1;
visibility: visible;
}
4.375%,
28.948333333333334% {
opacity: 1;
-o-transform: rotateX(0deg);
z-index: 1;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
-o-transform: rotateX(-90deg);
z-index: 1;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
@keyframes slider_descr {
3.0625%,
29.604583333333334% {
opacity: 1;
transform: rotateX(9deg);
z-index: 1;
visibility: visible;
}
4.375%,
28.948333333333334% {
opacity: 1;
transform: rotateX(0deg);
z-index: 1;
visibility: visible;
}
33.333333333333336% {
opacity: 0;
transform: rotateX(-90deg);
z-index: 1;
visibility: hidden;
}
33.343333333333334%,
100% {
z-index: 0;
}
}
.slider_cus>#slider_play1:checked~.slider_description>.num0>.slider_title,
.slider_cus>#slider_pause1:checked~.slider_description>.num0>.slider_title {
-webkit-animation: slider_title 24000ms infinite -1400ms ease;
-moz-animation: slider_title 24000ms infinite -1400ms ease;
-ms-animation: slider_title 24000ms infinite -1400ms ease;
-o-animation: slider_title 24000ms infinite -1400ms ease;
animation: slider_title 24000ms infinite -1400ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num1>.slider_title,
.slider_cus>#slider_pause1:checked~.slider_description>.num1>.slider_title {
-webkit-animation: slider_title 24000ms infinite 6600ms ease;
-moz-animation: slider_title 24000ms infinite 6600ms ease;
-ms-animation: slider_title 24000ms infinite 6600ms ease;
-o-animation: slider_title 24000ms infinite 6600ms ease;
animation: slider_title 24000ms infinite 6600ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num2>.slider_title,
.slider_cus>#slider_pause1:checked~.slider_description>.num2>.slider_title {
-webkit-animation: slider_title 24000ms infinite 14600ms ease;
-moz-animation: slider_title 24000ms infinite 14600ms ease;
-ms-animation: slider_title 24000ms infinite 14600ms ease;
-o-animation: slider_title 24000ms infinite 14600ms ease;
animation: slider_title 24000ms infinite 14600ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num0>.slider_descr,
.slider_cus>#slider_pause1:checked~.slider_description>.num0>.slider_descr {
-webkit-animation: slider_descr 24000ms infinite -1400ms ease;
-moz-animation: slider_descr 24000ms infinite -1400ms ease;
-ms-animation: slider_descr 24000ms infinite -1400ms ease;
-o-animation: slider_descr 24000ms infinite -1400ms ease;
animation: slider_descr 24000ms infinite -1400ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num1>.slider_descr,
.slider_cus>#slider_pause1:checked~.slider_description>.num1>.slider_descr {
-webkit-animation: slider_descr 24000ms infinite 6600ms ease;
-moz-animation: slider_descr 24000ms infinite 6600ms ease;
-ms-animation: slider_descr 24000ms infinite 6600ms ease;
-o-animation: slider_descr 24000ms infinite 6600ms ease;
animation: slider_descr 24000ms infinite 6600ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num2>.slider_descr,
.slider_cus>#slider_pause1:checked~.slider_description>.num2>.slider_descr {
-webkit-animation: slider_descr 24000ms infinite 14600ms ease;
-moz-animation: slider_descr 24000ms infinite 14600ms ease;
-ms-animation: slider_descr 24000ms infinite 14600ms ease;
-o-animation: slider_descr 24000ms infinite 14600ms ease;
animation: slider_descr 24000ms infinite 14600ms ease;
}
@-webkit-keyframes slider_title_text {
1.53125%,
31.792083333333334% {
opacity: 1;
-webkit-transform: translateX(-1%);
}
2.1875%,
31.135833333333334% {
opacity: 1;
-webkit-transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
-webkit-transform: translateX(100%);
}
}
@-moz-keyframes slider_title_text {
1.53125%,
31.792083333333334% {
opacity: 1;
-moz-transform: translateX(-1%);
}
2.1875%,
31.135833333333334% {
opacity: 1;
-moz-transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
-moz-transform: translateX(100%);
}
}
@-ms-keyframes slider_title_text {
1.53125%,
31.792083333333334% {
opacity: 1;
-ms-transform: translateX(-1%);
}
2.1875%,
31.135833333333334% {
opacity: 1;
-ms-transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
-ms-transform: translateX(100%);
}
}
@-o-keyframes slider_title_text {
1.53125%,
31.792083333333334% {
opacity: 1;
-o-transform: translateX(-1%);
}
2.1875%,
31.135833333333334% {
opacity: 1;
-o-transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
-o-transform: translateX(100%);
}
}
@keyframes slider_title_text {
1.53125%,
31.792083333333334% {
opacity: 1;
transform: translateX(-1%);
}
2.1875%,
31.135833333333334% {
opacity: 1;
transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
transform: translateX(100%);
}
}
@-webkit-keyframes slider_descr_text {
3.0625%,
29.604583333333334% {
opacity: 1;
-webkit-transform: translateX(1%);
}
4.375%,
28.948333333333334% {
opacity: 1;
-webkit-transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
}
@-moz-keyframes slider_descr_text {
3.0625%,
29.604583333333334% {
opacity: 1;
-moz-transform: translateX(1%);
}
4.375%,
28.948333333333334% {
opacity: 1;
-moz-transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
-moz-transform: translateX(-100%);
}
}
@-ms-keyframes slider_descr_text {
3.0625%,
29.604583333333334% {
opacity: 1;
-ms-transform: translateX(1%);
}
4.375%,
28.948333333333334% {
opacity: 1;
-ms-transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
-ms-transform: translateX(-100%);
}
}
@-o-keyframes slider_descr_text {
3.0625%,
29.604583333333334% {
opacity: 1;
-o-transform: translateX(1%);
}
4.375%,
28.948333333333334% {
opacity: 1;
-o-transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
-o-transform: translateX(-100%);
}
}
@keyframes slider_descr_text {
3.0625%,
29.604583333333334% {
opacity: 1;
transform: translateX(1%);
}
4.375%,
28.948333333333334% {
opacity: 1;
transform: translateX(0%);
}
33.333333333333336% {
opacity: 0;
transform: translateX(-100%);
}
}
.slider_cus>#slider_play1:checked~.slider_description>.num0 .slider_title>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>.num0 .slider_title>.slider_wrapper {
-webkit-animation: slider_title_text 24000ms infinite -1190ms ease;
-moz-animation: slider_title_text 24000ms infinite -1190ms ease;
-ms-animation: slider_title_text 24000ms infinite -1190ms ease;
-o-animation: slider_title_text 24000ms infinite -1190ms ease;
animation: slider_title_text 24000ms infinite -1190ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num1 .slider_title>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>.num1 .slider_title>.slider_wrapper {
-webkit-animation: slider_title_text 24000ms infinite 6810ms ease;
-moz-animation: slider_title_text 24000ms infinite 6810ms ease;
-ms-animation: slider_title_text 24000ms infinite 6810ms ease;
-o-animation: slider_title_text 24000ms infinite 6810ms ease;
animation: slider_title_text 24000ms infinite 6810ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num2 .slider_title>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>.num2 .slider_title>.slider_wrapper {
-webkit-animation: slider_title_text 24000ms infinite 14810ms ease;
-moz-animation: slider_title_text 24000ms infinite 14810ms ease;
-ms-animation: slider_title_text 24000ms infinite 14810ms ease;
-o-animation: slider_title_text 24000ms infinite 14810ms ease;
animation: slider_title_text 24000ms infinite 14810ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num0 .slider_descr>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>.num0 .slider_descr>.slider_wrapper {
-webkit-animation: slider_descr_text 24000ms infinite -1190ms ease;
-moz-animation: slider_descr_text 24000ms infinite -1190ms ease;
-ms-animation: slider_descr_text 24000ms infinite -1190ms ease;
-o-animation: slider_descr_text 24000ms infinite -1190ms ease;
animation: slider_descr_text 24000ms infinite -1190ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num1 .slider_descr>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>.num1 .slider_descr>.slider_wrapper {
-webkit-animation: slider_descr_text 24000ms infinite 6810ms ease;
-moz-animation: slider_descr_text 24000ms infinite 6810ms ease;
-ms-animation: slider_descr_text 24000ms infinite 6810ms ease;
-o-animation: slider_descr_text 24000ms infinite 6810ms ease;
animation: slider_descr_text 24000ms infinite 6810ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>.num2 .slider_descr>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>.num2 .slider_descr>.slider_wrapper {
-webkit-animation: slider_descr_text 24000ms infinite 14810ms ease;
-moz-animation: slider_descr_text 24000ms infinite 14810ms ease;
-ms-animation: slider_descr_text 24000ms infinite 14810ms ease;
-o-animation: slider_descr_text 24000ms infinite 14810ms ease;
animation: slider_descr_text 24000ms infinite 14810ms ease;
}
.slider_cus>#slider_play1:checked~.slider_description>label>.slider_title,
.slider_cus>#slider_play1:checked~.slider_description>label>.slider_descr,
.slider_cus>#slider_play1:checked~.slider_description>label>.slider_title>.slider_wrapper,
.slider_cus>#slider_play1:checked~.slider_description>label>.slider_descr>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>label>.slider_title,
.slider_cus>#slider_pause1:checked~.slider_description>label>.slider_descr,
.slider_cus>#slider_pause1:checked~.slider_description>label>.slider_title>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>label>.slider_descr>.slider_wrapper {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.slider_cus.slider_pauseHover:hover>.slider_description>label>.slider_title,
.slider_cus.slider_pauseHover:hover>.slider_description>label>.slider_descr,
.slider_cus.slider_pauseHover:hover>.slider_description>label>.slider_title>.slider_wrapper,
.slider_cus.slider_pauseHover:hover>.slider_description>label>.slider_descr>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>label>.slider_title,
.slider_cus>#slider_pause1:checked~.slider_description>label>.slider_descr,
.slider_cus>#slider_pause1:checked~.slider_description>label>.slider_title>.slider_wrapper,
.slider_cus>#slider_pause1:checked~.slider_description>label>.slider_descr>.slider_wrapper {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.slider_cus>.slide:checked~.slider_description>label {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
@media only screen and (max-width: 480px),
only screen and (-webkit-max-device-pixel-ratio: 2) and (max-width: 480px),
only screen and (max--moz-device-pixel-ratio: 2) and (max-width: 480px),
only screen and (-o-max-device-pixel-ratio: 2/1) and (max-width: 480px),
only screen and (max-device-pixel-ratio: 2) and (max-width: 480px),
only screen and (max-resolution: 192dpi) and (max-width: 480px),
only screen and (max-resolution: 2dppx) and (max-width: 480px) {
.slider_cus>.slider_description,
.slider_cus>.slider_bullets {
display: none;
}
}
</style>
At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.
Video Tutorial
Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.
Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.
