листать изображения с помощью CSS

Question

У меня есть группа изображений, и я хочу перевернуть изображение. На передней части изображения будут отображаться цифры (см. Изображение ниже), а на задней части будет изображение. Если пользователь щелкает другое изображение и оно соответствует первому нажатому изображению, оно исчезнет через пару секунд. Прямо сейчас я застрял на том, чтобы заставить изображения перевернуться. Я вставлю свой HTML-код и CSS внизу.

Чтобы перевернуть изображение, я попытался использовать эффект наведения, но это тоже не сработало

 #flipper:hover {
            transform: rotateY(180deg);
        }

body {
  color: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

h2 {
  text-align: center;
}

body {
  background-color: white;
}

img {
  width: 30%;
  float: left;
  margin: 1.66%;
}

p {
  margin-left: 1.66%;
  font-family: "Contrail One", cursive;
  font-size: 35px;
  text-transform: uppercase;
  border-bottom: 2px solid black;
  width: 30%;
  padding-bottom: 20px;
}

div.a {
  text-align: center;
  font-family: sans-serif;
}

#flipper:hover {
  transform: rotateY(180deg);
}

<link href="https://fonts.googleapis.com/css?family=Contrail+One" rel="stylesheet">


<div id="flipper">

  <img class="flip" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">
  <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">

  <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">
  <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">

  <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">
  <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">

  <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">
  <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">

</div>

Answer 1

Я думаю, для начала я не могу сказать, связали ли вы уже написанный CSS с вашим HTML. Я вижу только 1 ссылку, и это не на ваш CSS. Похож на шрифт Google.

Я создал https://codepen.io/robert9111/pen/MzabWZ

    <!-- HTML -->
   <div id="f1_container">
    <div id="f1_card" class="shadow">
      <div class="front face">
        <img class="size" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg/">
      </div>
      <div class="back face center">
        <p>This is nice for exposing more information about an image.</p>
        <p>Any content can go here.</p>
      </div>
    </div>
    </div>
    <!-- CSS -->
  #f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}

.size {
  width: 450px;
  height: 281px;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

для вас, чтобы проверить. Я думаю, что это может решить вашу проблему.

Я не делал их все, так как я думаю, что было бы хорошо, чтобы вы написали часть этого кода.