CSS slidshow - move thumbs from bottom to side?

[we5inelgr]

Hi all,

How can I modify this code, so that the thumbs are on the right side of the large pictures, instead of the bottom (like they are now). Put them in two different <TD> (but would that mess up the <div>'s)? Or, is there some other way?

The CSS:

<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>

The HTML:

<div id="box">

<ul id="slider">
<li id="1" >
<img src="pic1.png" alt="pic1" width="700" height="438" />
<p><span>Description 1.</span></p>
</li>
<li id="2">
<img src="pic2.png" alt="pic2" width="700" height="438" />
<p><span>Description 2.</span></p>
</li>
<li id="3">
<img src="pic3.png" alt="pic3" width="700" height="438" />
<p><span>Description 3.</span></p>
</li>
</ul>

<ul id="thumb">
<li><a href="#1"><img src="thmb1.png" alt="thmb1" width="50" height="50" /></a></li>
<li><a href="#2"><img src="thmb2.png" alt="thmb2" width="50" height="50" /></a></li>
<li><a href="#3"><img src="thmb3.png" alt="thmb3" width="50" height="50" /></a></li>
</ul>

</div>

Thanks.

[we5inelgr]

For a visual of this, see here:

http://codepen.io/we5inelgr/pen/gtxvG [codepen.io]

As can be seen, the thumbs are on the bottom (underneath the larger image).

How can those thumbs be moved to the right of the larger image?

[we5inelgr]

Issue resolve. Using entirely different template/code.