Смена изображений(слайдер) на CSS3

by Andrey Dobrovoi

HTML

<figure>
  <img src="http://dbmast.ru/files/responsive-images-demo/images/image03.jpg">
  <figcaption>
    <a href="#img2">
      <img src="http://dbmast.ru/files/hover-effect-img-css/img/image01.jpg">
    </a>
  </figcaption>
  <figcaption>
    <a href="#img2">
      <img src="http://dbmast.ru/files/responsive-images-demo/images/image03.jpg">
    </a>
  </figcaption>
</figure>

<div class="lightbox" id="img1">
  <a href="#close" class="close-lightbox"></a>
  <div class="lightbox__center">
    <a href="#img3">
      <img src="http://dbmast.ru/files/responsive-images-demo/images/image03.jpg">
    </a>
  </div>
</div>
<div class="lightbox" id="img2">
  <a href="#close" class="close-lightbox"></a>
  <div class="lightbox__center">
    <a href="#img1">
      <img src="http://dbmast.ru/files/hover-effect-img-css/img/image01.jpg">
    </a>
  </div>
</div>
<div class="lightbox" id="img3">
  <a href="#close" class="close-lightbox"></a>
  <div class="lightbox__center">
    <img src="http://dbmast.ru/files/lightbox-css3/img/img4.jpg">
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: rgba(57, 70, 78, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* Слайд-эффект для миниатюр */

figure {
  max-width: 350px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

figure figcaption,
figure figcaption img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.0);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.6s ease 0s;
  visibility: hidden;
}

figure img {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
  opacity: 1;
  visibility: visible;
  -transform: scale(1.0);
  -moz-transform: scale(1.0);
  -ms-transform: scale(1.0);
  -o-transform: scale(1.0);
  transform: scale(1.0);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

figure:hover figcaption,
figure:hover figcaption img {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1.0);
  -moz-transform: scale(1.0);
  -ms-transform: scale(1.0);
  -o-transform: scale(1.0);
  transform: scale(1.0);
}

figure:hover img {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.0);
  -moz-transform: scale(0.0);
  -ms-transform: scale(0.0);
  -o-transform: scale(0.0);
  transform: scale(0.0);
}

.lightbox {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
 ...