Flipping Images, Flipping more than one image on a page. Options

[JamKota]

Hi all, I apologise in advance if this is a very simple question but I'm struggling to add more than 1 image on my Gallery page that flips. I can put 1 image in its position and flip that image just fine and I'm happy with how it looks and works. But I want multiple images on my Gallery and all of them to flip when you put the mouse over each one in turn. Every time I try to add code for the next image the 1st and now 2nd image merge into a mix of both images? Remove my 2nd image attempted code and the 1st one again works just fine. Below is my html and css...Please put me out my misery lol

HTML :-

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="Spitfire1.JPEG" alt="Spitfire" id="image2" style="width:300px;height:300px;">
<br />
</div>
<div class="flip-card-back">
<h1>Super Marine Spitfire</h1>
<p>Printed & painted by myself.</p>
</div>

External CSS is :-

.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-card-front {
background-color: #bbb;
color: black;
}

.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}

#image1 {
position: absolute;
top: 30px;
right: 30px;
}

#image2 {
position: absolute;
top: 30px;
left: 30px;
}

#image3 {
position: absolute;
bottom: 30px;
right: 30px;
}