@charset "utf-8";

.css-slideshow{
   position: relative;
   max-width: 250px;
   height: 380px;
   display:block;
   margin-top:15px
   
}
.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 54s 48s infinite;
}
figure:nth-child(2) {
   animation: xfade 54s 42s infinite;
}
figure:nth-child(3) {
   animation: xfade 54s 36s infinite;
}
figure:nth-child(4) {
   animation: xfade 54s 30s infinite;
}
figure:nth-child(5) {
   animation: xfade 54s 24s infinite;
}
figure:nth-child(6) {
   animation: xfade 54s 18s infinite;
}
figure:nth-child(7) {
   animation: xfade 54s 12s infinite;
}
figure:nth-child(8) {
   animation: xfade 54s 6s infinite;
}
figure:nth-child(9) {
   animation: xfade 54s 0s infinite;
}

@keyframes xfade{
   17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
}