Full Screen Slide

by Emmanuel Garcia

HTML

<ul class="cb-slideshow">
	<li>
		<span>Image 01</span>
		<div>
			<h3>PHOTOGRAPHY</h3>
		</div>
	</li>
	<li>		<span>Image 02</span>
		<div>
			<h3>WEB PROJECTS</h3>
		</div></li>
	<li>		<span>Image 03</span>
		<div>
			<h3>KIOSK</h3>
		</div></li>
    
    <li>		<span>Image 04</span>
		<div>
			<h3>INVITATION</h3>
		</div></li>
    
    <li>		<span>Image 05</span>
		<div>
			<h3>WEDDING TOOLS</h3>
		</div></li>
    <li>		<span>Image 06</span>
		<div>
			<h3>multideas.mx</h3>
		</div></li>
</ul>

CSS

ul { list-style-type: none; }
	h3{color:#961732;  }
	.cb-slideshow,
	.cb-slideshow:after { 
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    top: 0px;
	    left: 0px;
	    z-index: 0; 
	}
	.cb-slideshow:after { 
	    content: '';
	    background: transparent url(https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left; 
	}
	.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;
	    animation: imageAnimation 36s linear infinite 0s; 
	}
	.cb-slideshow li div { 
	    z-index: 1000;
	    position: absolute;
	    bottom: 50%;
	    left: 0px;
	    width: 100%;
	    text-align: center;
	    opacity: 0;
	    color: #fff;
	    animation: titleAnimation 36s linear infinite 0s; 
	}
	.cb-slideshow li div h3 { 
	    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	    font-size: 8em;
	    padding: 0;
	    line-height: 0em; 
	}
	.cb-slideshow li:nth-child(1) span { 
	    background-image: url(https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/1.jpg) 
	}
	.cb-slideshow li:nth-child(2) span { 
	    background-image: url(https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/2.jpg);
	    animation-delay: 6s; 
	}
	.cb-slideshow li:nth-child(3) span { 
	    background-image: url(https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/3.jpg);
	    animation-delay: 12s; 
	}
	.cb-slideshow li:nth-child(4) span { 
	    background-image: url(https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/4.jpg);
	    animation-delay: 18s; 
	}
	.cb-slideshow li:nth-child(5) span { 
	    background-image: url(https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/5.jpg);
	    animation-delay: 24s; 
	}
	.cb-slideshow li:nth-child(6) span { 
	    background-image:...