After using jsfiddle for the file, I encountered an issue with centering the slideshow at the bottom. Despite my efforts, it remains aligned to the left margin. Check out the end results here: https://jsfiddle.net/n6kae2rn/ https://jsfiddle.net/n6kae2rn/embedded/result/
.css-slideshow {
text-align:center;
position: relative;
max-width: 410px;
height: 730px;
}
.css-slideshow figure {
margin: 0;
position: absolute;
}
.css-slideshow figcaption {
position: absolute;
top: 0;
color: #fff;
background: rgba(0, 0, 0, .3);
font-size: .8em;
padding: 8px 12px;
opacity: 0;
transition: opacity .5s;
}
.css-slideshow:hover figure figcaption {
transition: opacity .5s;
opacity: 1;
}
.css-slideshow figure {
opacity:0;
}
figure:nth-child(1) {
animation: xfade 42s 32s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 24s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 16s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 8s infinite;
}
figure:nth-child(5) {
animation: xfade 48s 0s infinite;
}
@keyframes xfade {
0% {
opacity: 1;
}
10.5% {
opacity:1;
}
20% {
opacity: 0;
}
98% {
opacity:0;
}
100% {
opacity:1;
}
}
div.poster {
background: url(http://jillun.com/dp-intsmall.jpg) repeat;
padding: 25px;
}