Pure CSS Slideshow with transform fadein fadeout effects

1 reply [Last post]

Thu, 2014-04-03 21:40

lizardhr

Offline

newbie

Last seen: 8 years 51 weeks ago

Timezone: GMT-3

Joined: 2014-04-03

Posts: 1

Points: 2

I'm not able to make the transition of this slideshow to work with buttons, do you know how I could do?

I have this live example jsfiddle with this HTML:

<!DOCTYPE html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>myPage</title>
</head>
<body>
   <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
   <label for="button-1" class="button-label-1"></label>
   <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
   <label for="button-2" class="button-label-2"></label>
   <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
   <label for="button-3" class="button-label-3"></label>
   <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
 
   <label for="button-4" class="button-label-4"></label>
   <label for="button-1" class="sp-arrow sp-a1"></label>
   <label for="button-2" class="sp-arrow sp-a2"></label>
   <label for="button-3" class="sp-arrow sp-a3"></label>
   <label for="button-4" class="sp-arrow sp-a4"></label>
 
   <ul class="cb-slideshow">
      <li>
         <span>Image 01</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 02</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 03</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 04</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
   </ul>
</body>
</html>

and this CSS:

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: -16px;
    left: 0px;
    z-index: 0; 
}
 
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 24s linear infinite 0s;
    -moz-animation: imageAnimation 24s linear infinite 0s;
    -o-animation: imageAnimation 24s linear infinite 0s;
    -ms-animation: imageAnimation 24s linear infinite 0s;
    animation: imageAnimation 24s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    top: 45%;
    left: 26%;
    width: 50%;
    text-align: center;
    opacity: 0;
    color: #fff;
	text-align:left;
    -webkit-animation: titleAnimation 24s linear infinite 0s;
    -moz-animation: titleAnimation 24s linear infinite 0s;
    -o-animation: titleAnimation 24s linear infinite 0s;
    -ms-animation: titleAnimation 24s linear infinite 0s;
    animation: titleAnimation 24s linear infinite 0s; 
}
 
.text_products { 
    font-family: 'Questrial', 'Arial Narrow', 'Arial', 'sans-serif';
    font-size: 20px;
    padding: 0;
	top:50%;
    line-height:normal;
}
 
.text_products b {
	font-weight:bold;
}
 
ul.cb-slideshow  {
	list-style-type: none;
}
 
.cb-slideshow li:nth-child(1) span { 
    background-image: url(<a href="http://incubadora.massimodifa.com.br/the-industry.com/img/products_ti_pub.jpg" rel="nofollow">http://incubadora.massimodifa.com.br/the-industry.com/img/products_ti_pub.jpg</a>);                     
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(<a href="http://incubadora.massimodifa.com.br/the-industry.com/img/products_tale_or_made.jpg" rel="nofollow">http://incubadora.massimodifa.com.br/the-industry.com/img/products_tale_or_made.jpg</a>);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(<a href="http://incubadora.massimodifa.com.br/the-industry.com/img/products_just_in_time.jpg" rel="nofollow">http://incubadora.massimodifa.com.br/the-industry.com/img/products_just_in_time.jpg</a>);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(<a href="http://incubadora.massimodifa.com.br/the-industry.com/img/products_story_buzz.jpg" rel="nofollow">http://incubadora.massimodifa.com.br/the-industry.com/img/products_story_buzz.jpg</a>);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
 
.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
 
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    4% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    22% { opacity: 1 }
    35% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    21% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}
 
@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 15px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 10px }
}
 
 
 
input {
    position: absolute;
	bottom: 15px;
	left: 50%;
	width: 9px;
	height: 9px;
	z-index: 1001;
	cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}
 
input + label {
    position: absolute;
    bottom: 15px;
	left: 50%;
    width: 6px;
	height: 6px;
	display: block;
	z-index: 1000;
	border: 3px solid #fff;
	border: 3px solid rgba(255,255,255,0.9);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background-color linear 0.1s;
    -moz-transition: background-color linear 0.1s;
    -o-transition: background-color linear 0.1s;
    -ms-transition: background-color linear 0.1s;
    transition: background-color linear 0.1s;
 
}
input:checked + label {
	background-color: #fff;
    background-color: rgba(255,255,255,0.9);
}
 
.sp-selector-1, .button-label-1 {
    margin-left: -36px;
}
 
.sp-selector-2, .button-label-2 {
    margin-left: -18px;
}
 
.sp-selector-4, .button-label-4 {
    margin-left: 18px;
}
 
.sp-arrow {
    position: absolute;
	top: 50%;
	width: 75px;
	height: 72px;
	margin-top: -19px;
	display: none;
	opacity: 0.8;
	cursor: pointer;
	z-index: 1000;
	background: transparent url(<a href="http://incubadora.massimodifa.com.br/the-industry.com/img/frecce.png" rel="nofollow">http://incubadora.massimodifa.com.br/the-industry.com/img/frecce.png</a>) no-repeat;
}
 
.sp-arrow:hover{
	opacity: 1;
}
.sp-arrow:active{
	margin-top: -18px;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
.sp-selector-3:checked ~ .sp-arrow.sp-a4 {
    right: 15px;
	display: block;
	background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
.sp-selector-4:checked ~ .sp-arrow.sp-a3 {
    left: 15px;
	display: block;
	background-position: top left;
}
 
 
input.sp-selector-1:checked ~ .cb-slideshow li:nth-child(1) span {
    background-image: url(<a href="http://incubadora.massimodifa.com.br/the-industry.com/img/products_ti_pub.jpg" rel="nofollow">http://incubadora.massimodifa.com.br/the-industry.com/img/products_ti_pub.jpg</a>); 
        -webkit-animation: imageAnimation 24s linear infinite 0s;
}
 
input.sp-selector-2:checked ~ .cb-slideshow li:nth-child(2) span { 
    background-image: url(<a href="http://incubadora.massimodifa.com.br/the-industry.com/img/products_tale_or_made.jpg" rel="nofollow">http://incubadora.massimodifa.com.br/the-industry.com/img/products_tale_or_made.jpg</a>);
    -webkit-animation: imageAnimation 24s linear infinite 0s;
}  
 
input.sp-selector-3:checked ~ .cb-slideshow li:nth-child(3) span { 
    background-image: url(<a href="http://incubadora.massimodifa.com.br/the-industry.com/img/products_just_in_time.jpg" rel="nofollow">http://incubadora.massimodifa.com.br/the-industry.com/img/products_just_in_time.jpg</a>);
    -webkit-animation: imageAnimation 24s linear infinite 0s;
 
}
 
input.sp-selector-4:checked ~ .cb-slideshow li:nth-child(4) span { 
    background-image: url(<a href="http://incubadora.massimodifa.com.br/the-industry.com/img/products_story_buzz.jpg" rel="nofollow">http://incubadora.massimodifa.com.br/the-industry.com/img/products_story_buzz.jpg</a>);
    -webkit-animation: imageAnimation 24s linear infinite 0s;
 
}
 
input.sp-selector-1:checked ~ .cb-slideshow li:nth-child(1) div {
     -webkit-animation: titleAnimation 24s linear infinite 0s;
}
 
input.sp-selector-2:checked ~ .cb-slideshow li:nth-child(2) div {
     -webkit-animation: titleAnimation 24s linear infinite 0s;
}
 
input.sp-selector-3:checked ~ .cb-slideshow li:nth-child(3) div { 
     -webkit-animation: titleAnimation 24s linear infinite 0s;
}
 
input.sp-selector-4:checked ~ .cb-slideshow li:nth-child(4) div { 
     -webkit-animation: titleAnimation 24s linear infinite 0s;
}

Tags:

Mon, 2014-04-07 12:01

helldog2004

Offline

Enthusiast

Netherlands

Last seen: 6 years 33 weeks ago

Netherlands

Timezone: GMT+2

Joined: 2014-03-02

Posts: 205

Points: 239

I am wondering why you want

I am wondering why you want your button to transition with the images.
Why not make the images disapear and show them whenever your mouse is hovering the image.

I created a jsfiddle for you as example, maybe you can need something like this.
Here it is

Check Maximum Webdesign for your online solutions

Pure CSS Slideshow with transform fadein fadeout effects

I am wondering why you want

User login

Navigation