<!DOCTYPE html>
<html lang=""><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {border: none;}
a {outline: none;}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background: url(images/post-BG.png) repeat;
text-align: center;
color: #fff;
}
h1 {
margin: 30px 0 0 0;
text-shadow: #d6d6d6 0px 1px 2px;
color: #030303
}
h3 {
margin: 10px 0 10px 0;
text-shadow: #d6d6d6 0px 1px 2px;
color: #030303
}
/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#box {
text-align: left;
width: 700px;
margin: 30px auto 0 auto;
background: #000;
overflow: hidden;
border: 10px solid #000;
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
}
ul#slider{
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px;
height: 438px;
overflow: hidden;
}
ul#thumb {
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px;
}
ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 35px;
height: 35px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}
ul#thumb a:hover {
opacity: 1;
}
ul#slider li {
width: 700px;
height: 438px;
position: absolute;
}
ul#slider li p {
position: absolute;
bottom: 0;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}
ul#slider li p span {
line-height: 1.2em;
padding: 10px;
display: block;
}
/* Animation for the :target image. Slides the image in. */
@-webkit-keyframes moveTarget {
0% {
left:-700px;
}
100% {
left:0px;
}
}
ul#slider li:target {
-webkit-animation-name: moveTarget;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}
/*
Animation for the current image. Slides it out the frame and back to the starting position.
Adds a lower z-index than the now current image.
*/
@-webkit-keyframes moveIt {
0% {
left:0px;
}
50% {
left:700px;
}
100% {
left:-700px;
z-index: 5;
}
}
ul#slider li:not(:target) {
-webkit-animation-name: moveIt;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}
</style>
</head>
<body>
<div id="box">
<ul id="slider">
<li id="1">
<img src="data/grass-blades.jpg" alt="grass-blades" height="438" width="700">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</span></p>
</li>
<li id="2">
<img src="data/ladybug.jpg" alt="ladybug" height="438" width="700">
<p><span>Mind your step!</span></p>
</li>
<li id="3">
<img src="data/lotus.jpg" alt="lotus" height="438" width="700">
<p><span>This is an image of a big flower!</span></p>
</li>
<li id="4">
<img src="data/stones.jpg" alt="stones" height="438" width="700">
<p><span>Damn! Those are some nice looking stones!</span></p>
</li>
</ul>
<ul id="thumb">
<li><a href="#1"><img src="data/grass-blades.jpg" alt="grass-blades" height="50" width="50"></a></li>
<li><a href="#2"><img src="data/ladybug.jpg" alt="ladybug" height="50" width="50"></a></li>
<li><a href="#3"><img src="data/lotus.jpg" alt="lotus" height="50" width="50"></a></li>
<li><a href="#4"><img src="data/stones.jpg" alt="stones" height="50" width="50"></a></li>
</ul>
</div>
</body></html>
