Flipping image grid with different pictures - html

Question

I am creating a responsive image grid. Currently, there is the same picture in each box but I would like to create a mask so that that image is shown throughout all of the boxes, not repeated in each. Kind of like this: http://ptgmedia.pearsoncmg.com/images/chap3_032133065x/elementLinks/082fig02.jpg
I also would like to create a flipping effect on each box where when it flips over, it would show a completely different picture, just in that one box.
Thanks in advance for your help if applicable.
div.grid {
font-size: 0;
width: 95%;
margin: 30px auto;
font-family: sans-serif;
}
a.grid {
font-size: 16px;
overflow: hidden;
display: inline-block;
margin-bottom: 8px;
width: calc(50% - 4px);
margin-right: 8px;
clip:
}
a.grid:nth-of-type(2n) {
margin-right: 0;
}
#media screen and (min-width: 50em) {
a.grid {
width: calc(25% - 6px);
}
a.grid:nth-of-type(2n) {
margin-right: 8px;
}
a.grid:nth-of-type(4n) {
margin-right: 0;
}
}
a.grid:hover img {
}
figure {
margin: 0;
}
img.grid {
border: none;
max-width: 100%;
height: auto;
display: block;
background: #ccc;
transition: transform .2s ease-in-out;
}
.p a {
display: inline;
font-size: 13px;
margin: 0;
}
.p {
text-align: center;
font-size: 13px;
padding-top: 100px;
}
<div class="grid">
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
<a class="grid" href="#">
<figure>
<img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
</figure>
</a>
</div>

Answer 1

If I got you right, you're trying to do something like this:
EDIT: Fixed the buggy hover and that the items remain squares.
html, body{
width:100%;
height:100%;
box-sizing:border-box;
margin:0;
padding:0;
}
.grid{
width:calc(60vw + 30px);
display:inline-block;
position:fixed;
background-color:lightgray;
perspective:1000px;
}
.griditem{
display:block;
width:20vw;
margin:5px;
height:20vw;
float:left;
}
.front{
width:100%;
height:100%;
background:#fff url('http://www.popsci.com/sites/popsci.com/files/styles/large_1x_/public/import/2013/images/2013/03/bluemarble_1.jpg?itok=-IIyWZZX') no-repeat;
background-attachment:fixed;
background-position: top left;
background-size:cover;
transform:rotateY(0deg);
transition:.4s ease-in-out;
cursor:pointer;
}
.back{
width:100%;
height:100%;
transform:rotateY(180deg);
background:#fff url('http://www.dentoncorkermarshall.com/wp-content/uploads/2013/12/Asia-Square-06.jpg?x92178') no-repeat;
background-size:cover;
backface-visibility:hidden;
transition:.4s ease-in-out;
position:absolute;
top:0;
z-index:2;
}
.griditem:hover .front{
transform:rotateY(180deg);
transition:.4s ease-in-out;
}
.griditem:hover .back{
transform:rotateY(0deg);
transition:.4s ease-in-out;
}
<div class="grid">
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
<div class="griditem">
<div class="front">
<div class="back"></div>
</div>
</div>
</div>