I stumbled upon this amazing CSS-only slideshow with thumbnails for my project here. I've been experimenting with the code to try and align the thumbnails vertically on the right instead of horizontally at the bottom, but haven't had much luck...
The main image needs to be 640px by 640px:
/*Customizing the CSS*/
* {margin: 0; padding: 0;}
body {background: #ccc;}
.slider{
width: 640px; /*Same as the width of the large image*/
position: relative;
/*Using padding rather than height*/
padding-top: 640px; /*This brings down the labels*/
margin: 100px auto;
/*Adding a shadow effect*/
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
/*Adding transitions for smoother effects*/
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
/*Adjusting spacing for the thumbnails*/
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
/*Setting default style with low opacity*/
opacity: 0.6;
}
.slider label img{
display: block;
}
/*Implementing click effects*/
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
/*Clicking on any thumbnail should change its opacity(style)*/
/*Working on the main images now*/
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
/*Hiding all main images at 110% size
On click, displaying images at normal size for the complete effect
*/
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}