flipping images using css - css

Question

I have a group of images and what I want is to be able to flip the image. For the front of the image it will show numbers(see image below) and on the back it will have a picture. If the user clicks another image and it matches the first picture clicked, then it will disappear after a couple of seconds. Right now I am stuck on getting the images to flip. I will paste my html code and css down below.
To make the image flip I tried using the hover effect but this did not work either
#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

I think to start off, i couldnt tell if you had already linked your written CSS to your HTML. I see only 1 link and its not to your css. Looks like a google font.
I created a 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;
}
for you to check out. I think this may solve your issue.
I didn't do them all as I think it would be good for you to write out some of that code.