<div id="slider_wrapper">
<div id="slider_wrapper">
<div id="slider">
<div id="slides_info">
<div class="slide_info one">
<h2>Title Three</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
nisi elit consequat ipsum, nec sagittis sem nibh
id elit. Duis sed odio sit amet nibh vulputate
cursus a sit amet mauris. Morbi accumsan ipsum
velit.
</p>
<p>
Duis sed odio sit amet nibh vulputate
cursus a sit amet mauris. Morbi accumsan ipsum
velit.
</p>
<a class="button" href="#">Call To Action Buttons</a>
<a class="button" href="#">OH MY!</a>
</div>
<div class="slide_info two">
<h2>Title Four</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
nisi elit consequat ipsum, nec sagittis sem nibh
id elit. Duis sed odio sit amet nibh vulputate
cursus a sit amet mauris. Morbi accumsan ipsum
velit.
</p>
<p>
Duis sed odio sit amet nibh vulputate
cursus a sit amet mauris. Morbi accumsan ipsum
velit.
</p>
<a class="button" href="#">Holy SHIT!</a>
<a class="button" href="#">It's so COOL!</a>
</div>
<div class="slide_info three">
<h2>Title One</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
nisi elit consequat ipsum, nec sagittis sem nibh
id elit. Duis sed odio sit amet nibh vulputate
cursus a sit amet mauris. Morbi accumsan ipsum
velit.
</p>
<p>
Duis sed odio sit amet nibh vulputate
cursus a sit amet mauris. Morbi accumsan ipsum
velit.
</p>
<a class="button" href="#">Isn't this AWESOME?</a>
<a class="button" href="#">Yes it is!</a>
</div>
<div class="slide_info four">
<h2>Title Two</h2>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
nisi elit consequat ipsum, nec sagittis sem nibh
id elit. Duis sed odio sit amet nibh vulputate
cursus a sit amet mauris. Morbi accumsan ipsum
velit.
</p>
<p>
Duis sed odio sit amet nibh vulputate
cursus a sit amet mauris. Morbi accumsan ipsum
velit.
</p>
<a class="button" href="#">Well, then grab it NOW!</a>
<a class="button" href="#">Okay!</a>
</div>
</div>
<div id="slides_image">
<div class="slide one">
<img src="http://cssdeck.com/uploads/media/items/4/41tAxTu.png" />
</div>
<div class="slide two">
<img src="http://cssdeck.com/uploads/media/items/1/1hjGftu.png" />
</div>
<div class="slide three">
<img src="http://cssdeck.com/uploads/media/items/4/4OIJyak.png" />
</div>
<div class="slide four">
<img src="http://cssdeck.com/uploads/media/items/6/68BYSto.png" />
</div>
</div>
</div>
</div>
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
body {
background: #ccc;
}
/* Positioning */
#slider #slides_image .slide.one {
left: 400px;
top: 0;
animation: fadeOne 16s infinite;
animation: fadeOne 16s infinite;
animation: fadeOne 16s infinite;
}
#slider #slides_image .slide.two {
left: 900px;
top: 500px;
transform: rotate(90deg);
transform: rotate(90deg);
transform: rotate(90deg);
animation: fadeTwo 16s infinite;
animation: fadeTwo 16s infinite;
animation: fadeTwo 16s infinite;
}
#slider #slides_image .slide.three {
left: 400px;
top: 1000px;
transform: rotate(180deg);
transform: rotate(180deg);
transform: rotate(180deg);
animation: fadeThree 16s infinite;
animation: fadeThree 16s infinite;
animation: fadeThree 16s infinite;
}
#slider #slides_image .slide.four {
left: -100px;
top: 500px;
transform: rotate(270deg);
transform: rotate(270deg);
transform: rotate(270deg);
animation: fadeFour 16s infinite;
animation: fadeFour 16s infinite;
animation: fadeFour 16s infinite;
}
#slider #slides_info .slide_info.one {
left: 400px;
top: 0;
transform: rotate(180deg);
transform: rotate(180deg);
transform: rotate(180deg);
animation: fadeThree 16s infinite;
animation: fadeThree 16s infinite;
animation: fadeThree 16s infinite;
}
#slider #slides_info .slide_info.two {
left: 800px;
top: 400px;
transform: rotate(270deg);
transform: rotate(270deg);
transform: rotate(270deg);
animation: fadeFour 16s infinite;
animation: fadeFour 16s infinite;
animation: fadeFour 16s infinite;
}
#slider #slides_info .slide_info.three {
left: 400px;
bottom: 0;
animation: fadeOne 16s infinite;
animation: fadeOne 16s infinite;
animation: fadeOne 16s infinite;
}
#slider #slides_info .slide_info.four {
left: 0;
top: 400px;
transform: rotate(90deg);
transform: rotate(90deg);
transform: rotate(90deg);
animation: fadeTwo 16s infinite;
animation: fadeTwo 16s infinite;
animation: fadeTwo 16s infinite;
}
/* Slider Styles */
#slider_wrapper {
position: relative;
margin: 100px auto;
width: 1000px;
height: 400px;
overflow: hidden;
}
#slider {
width: 900px;
height: 300px;
top: 50px;
left: 50px;
position: relative;
}
#slider #slides_image {
position: absolute;
top: 0;
left: 0px;
width: 1300px;
height: 1300px;
animation: rotate 16s ease infinite;
animation: rotate 16s ease infinite;
animation: rotate 16s ease infinite;
}
#slider #slides_info {
position: absolute;
bottom: 0;
left: -400px;
width: 1100px;
height: 1100px;
animation: rotate 16s ease infinite;
animation: rotate 16s ease infinite;
animation: rotate 16s ease infinite;
z-index: 5;
}
#slider #slides_info .slide_info {
width: 300px;
height: 300px;
position: absolute;
}
#slider #slides_image .slide {
width: 500px;
height: 300px;
background: rgba(0,0,0,0.5);
position: absolute;
background: url(http://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/media-pause.png) 50% 50% no-repeat;
}
/* Text Styles */
#slider #slides_info .slide_info h2 {
color: #333;
font-family: "Droid Sans", sans-serif;
margin: 0;
font-weight: normal;
font-size: 24px;
padding-bottom: 5px;
}
#slider #slides_info .slide_info p {
color: #666;
font: 13px/18px Arial, sans-serif;
text-shadow: 1px 1px #eee;
}
/* Button */
#slider a.button {
display: inline-block;
height: 40px;
background: #ededed;
padding: 0 15px;
bottom: 0;
left: 0;
font: 13px/40px Arial, sans-serif;
border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
border: 1px solid #aaa;
color: #333;
text-decoration: none;
cursor: pointer;
margin-top: 40px;
}
/*
#slider:hover #slides_image,#slider:hover #slides_info,#slider:hover #slides_image .slide,#slider:hover #slides_info .slide_info {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
}
#slider:hover .slide img {
filter: alpha(opacity=50);
opacity: .5;
}
*/
/* Animation Keyframes */
@-moz-keyframes rotate {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(0deg);
}
25% {
transform: rotate(-90deg);
}
45% {
transform: rotate(-90deg);
}
50% {
transform: rotate(-180deg);
}
70% {
transform: rotate(-180deg);
}
75% {
transform: rotate(-270deg);
}
95% {
transform: rotate(-270deg);
}
100% {
transform: rotate(-360deg);
}
}
@-webkit-keyframes "rotate" {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(0deg);
}
25% {
transform: rotate(-90deg);
}
45% {
transform: rotate(-90deg);
}
50% {
transform: rotate(-180deg);
}
70% {
transform: rotate(-180deg);
}
75% {
transform: rotate(-270deg);
}
95% {
transform: rotate(-270deg);
}
100% {
transform: rotate(-360deg);
}
}
@keyframes "rotate" {
0% { transform: rotate(0deg); }
20% { transform: rotate(0deg); }
25% { transform: rotate(-90deg); }
45% { transform: rotate(-90deg); }
50% { transform: rotate(-180deg); }
70% { transform: rotate(-180deg); }
75% { transform: rotate(-270deg); }
95% { transform: rotate(-270deg); }
100% { transform: rotate(-360deg); }
}
@-moz-keyframes fadeOne {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
20% {
filter: alpha(opacity=100);
opacity: 1;
}
22% {
filter: alpha(opacity=0);
opacity: 0;
}
30% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-webkit-keyframes "fadeOne" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
20% {
filter: alpha(opacity=100);
opacity: 1;
}
22% {
filter: alpha(opacity=0);
opacity: 0;
}
30% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@keyframes "fadeOne" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
20% {
filter: alpha(opacity=100);
opacity: 1;
}
22% {
filter: alpha(opacity=0);
opacity: 0;
}
30% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-moz-keyframes fadeTwo {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
45% {
filter: alpha(opacity=100);
opacity: 1;
}
47% {
filter: alpha(opacity=0);
opacity: 0;
}
55% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-webkit-keyframes "fadeTwo" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
45% {
filter: alpha(opacity=100);
opacity: 1;
}
47% {
filter: alpha(opacity=0);
opacity: 0;
}
55% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@keyframes "fadeTwo" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
45% {
filter: alpha(opacity=100);
opacity: 1;
}
47% {
filter: alpha(opacity=0);
opacity: 0;
}
55% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-moz-keyframes fadeThree {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
70% {
filter: alpha(opacity=100);
opacity: 1;
}
72% {
filter: alpha(opacity=0);
opacity: 0;
}
80% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-webkit-keyframes "fadeThree" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
70% {
filter: alpha(opacity=100);
opacity: 1;
}
72% {
filter: alpha(opacity=0);
opacity: 0;
}
80% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@keyframes "fadeThree" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
70% {
filter: alpha(opacity=100);
opacity: 1;
}
72% {
filter: alpha(opacity=0);
opacity: 0;
}
80% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
@-moz-keyframes fadeFour {
0% {
filter: alpha(opacity=0);
opacity: 0;
}
5% {
filter: alpha(opacity=0);
opacity: 0;
}
95% {
filter: alpha(opacity=100);
opacity: 1;
}
97% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
@-webkit-keyframes "fadeFour" {
0% {
filter: alpha(opacity=0);
opacity: 0;
}
5% {
filter: alpha(opacity=0);
opacity: 0;
}
95% {
filter: alpha(opacity=100);
opacity: 1;
}
97% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}
@keyframes "fadeFour" {
0% {
filter: alpha(opacity=0);
opacity: 0;
}
5% {
filter: alpha(opacity=0);
opacity: 0;
}
95% {
filter: alpha(opacity=100);
opacity: 1;
}
97% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=0);
opacity: 0;
}
}