CSS
/*
Author: Ashfaq Ahmed @ Codeconvey.
Author URI: http://www.codeconvey.com/
*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
#cc-slider {
text-align: center;
margin: 0 auto;
max-width: 850px;
}
#cc-slider input {
display: none;
}
#cc-slider label, a {
color: #ef023f;
cursor: pointer;
text-decoration: none;
}
#cc-slider label:hover {
color: #ff0042 !important;
}
#slide1:checked ~ #cc-slides .inner { margin-left:0; }
#slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
#slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
#slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
#slide5:checked ~ #cc-slides .inner { margin-left:-400%; }
#overflow {
width: 100%;
overflow: hidden;
}
#cc-slides article img {
width: 100%;
}
#cc-slides .inner {
width: 500%;
line-height: 0;
}
#cc-slides article {
width: 20%;
float: left;
}
#controls {
margin: -8% 0 0 84%;
width: 15%;
height: 50px;
}
#controls label {
display: none;
width: 50px;
height: 50px;
}
#active {
margin: 23% 0 0;
text-align: center;
}
#active label {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
width: 10px;
height: 10px;
background: #f89e67;
}
#active label:hover {
background: #ccc;
border-color: #777 !important;
}
#controls label:hover {
opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
background: url('http://codeconvey.com/Tutorials/css-image-slider-tutorial/images/next.png') no-repeat;
float: right;
margin: 0 10px 0 0;
display: block;
background-color:#ef023f;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
background: url('http://codeconvey.com/Tutorials/css-image-slider-tutorial/images/prev.png') no-repeat;
float: left;
margin: 0 0 0 17px;
display: block;
background-color:#ef023f;
}
/* cctooltip Box */
.cctooltip {
color: #FFFFFF;
font-style: italic;
line-height: 20px;
margin-top: 250px;
opacity: 0;
position: absolute;
text-align: left;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.cctooltip h3 {
color: #FFFFFF;
margin: 0 0 5px;
font-weight: normal;
font-size: 16px;
font-style: normal;
background: none repeat scroll 0 0 #222222;
padding: 5px;
}
.cctooltip h4 {
color: #FFFFFF;
margin: 0 0 5px;
font-weight: normal;
font-size: 14px;
font-style: normal;
background: none repeat scroll 0 0 #222222;
padding: 5px;
text-align:right;
width:106px;
}
/* cc-slider Styling */
#cc-slides {
margin: 45px 0 0;
padding: 1%;
background: #fff;
}
/* Animation */
#cc-slides .inner {
-webkit-transform: translateZ(0);
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#cc-slider {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#controls label{
-webkit-transform: translateZ(0);
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
#slide1:checked ~ #cc-slides article:nth-child(1) .cctooltip,
#slide2:checked ~ #cc-slides article:nth-child(2) .cctooltip,
#slide3:checked ~ #cc-slides article:nth-child(3) .cctooltip,
#slide4:checked ~ #cc-slides article:nth-child(4) .cctooltip,
#slide5:checked ~ #cc-slides article:nth-child(5) .cctooltip {
opacity: 1;
-webkit-transition: all 1s ease-out 0.6s;
-moz-transition: all 1s ease-out 0.6s;
-o-transition: all 1s ease-out 0.6s;
transition: all 1s ease-out 0.6s;
}
/* demo */
.info{
line-height:25px;
padding:0 30px;
font-size:15px;
font-weight:300;
text-align:center;
}
