Enlarging Images on Flip Cards - html

Question

I have been learning about flip cards and I have run into an issue. I have two cards that when they are flipped, there is a picture on the back. By moving the mouse a second time, the picture should enlarge. The issue I am having is when the image on the card to the left is enlarged, it is hidden behind the second card to the right. However, when the image on the card to the right is enlarged, it appears in front the first card. What I would like is for the picture to appear in front regardless as to what card is flipped. I have read that this is an issue with the z-index but I have been unsuccessful in figuring out where and how to set it.
The code for the web page is:
<div class = "center">
<div class="flip3d">
<div class="back"> <img class="exampleGif enlargeRight" src="https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg?auto=compress&cs=tinysrgb&h=350"></div>
<div class="front" style="width:400% height:300%">
<p>Cats</p>
</div>
</div>
<div class="flip3d">
<div class="back"> <img class = "exampleGif enlargeLeft" src="https://images.pexels.com/photos/66898/elephant-cub-tsavo-kenya-66898.jpeg?auto=compress&cs=tinysrgb&h=350"></div>
<div class="front" style="width:400% height:300%">
<p>Elephant</p>
</div>
</div>
The css file is:
.flip3d{
width:400px;
height:300px;
margin: 10px;
float: left;
}
.flip3d > .front{
position: absolute;
transform: perspective(600px) rotateY(0deg);
width:400px;
height:300px;
border-radius: 7px;
background: #267326; /* was #FCO */
backface-visibility: hidden;
transition: transform .5s linear 0s;
font-size:1.5vw;
font-family: Arial, Helvetica, sans-serif;
font-style: oblique;
color: white;
text-align: center;
}
.flip3d > .back{
position: absolute;
transform: perspective(600px) rotateY(180deg);
width:400px;
height:300px;
border-radius: 7px;
background: #80BFFF;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip3d:hover > .front{
transform: perspective(600px) rotateY(-180deg);
}
.flip3d:hover > .back{
transform: perspective(600px) rotateY(0deg);
}
img.exampleGif {
width:400px;
height:300px;
z-index:0;
position:relative;
}
.center {
margin: auto;
width: 50%;
border: none;
padding: 10px;
}
.enlargeRight:hover {
transform:scale(2,2);
transform-origin:0 0;
transition: all .5s;
}
.enlargeLeft:hover {
transform:scale(2,2);
transform-origin:right top;
transition: all .5s;
}
The code that I am using is located here.
Than you for your help.

Answer 1

Add z-index in the class below with the same value as I did. There is little doc to increase your knowledge.
EDIT: This doesn't need the value to equal 1 or 2. Just z-index in .back must be greater than in .front.
.flip3d > .back{
position: absolute;
transform: perspective(600px) rotateY(180deg);
width:400px;
height:300px;
border-radius: 7px;
background: #80BFFF;
backface-visibility: hidden;
transition: transform .5s linear 0s;
z-index: 1;
}