How to make the images not overlapping each other? - html

Question

I want to place the flip cards onto the images so that when I hover over the flip card, the card will be flipped but the image will not be flipped. I am able to insert the flip cards on the images, but the images seem to be overlapping each other? Is there any ways to get rid of the overlapping of images? And also I would like to make the flip cards position at the center of the images.
.pic {height: 500px;
width: 400px;
opacity: 0.5;
float: left;}
.flipCard {background-color: transparent;
width: 300px;
height: 350px;
border: 3px solid black;
border-style: double;
perspective: 1000px;
float: left;}
.flipCardInner {position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;}
.flipCard:hover .flipCardInner {transform: rotateY(180deg);}
.flipCardFront, .flipCardBack {position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;}
.flipCardFront {background-color: pink;
color: rgba(255, 255, 255, 0.884);
font: 25px Imprint MT Shadow;
text-shadow: 2px 2px 4px black;}
.flipCardFront h1 {padding-top: 20px;}
.flipCardBack {background-color: rgba(30, 165, 255, 0.774);
color: white;
font: 18px Book Antiqua;
line-height: 1.5;
text-shadow: 1px 1px 3px black;
transform: rotateY(180deg);}
.flipCardBack p.headline {padding-top: 20px;}
<div class="flipCard">
<div>
<img src="april.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> April's <br> Pinky </h1>
</div>
<div class="flipCardBack">
<p class="headline"> It's not April's Fool, <br> but it's April's Pinky! </p>
<p> Just need to wear PINK costume <br> to enjoy special discount <br> in Fine Dinner course! </p>
</div>
</div>
</div>
<div class="flipCard">
<div>
<img src="wine.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> Be a <br> Sommelier </h1>
</div>
<div class="flipCardBack">
<p class="headline"> Do you love wine? </p>
<p> It's the opportunity for you <br> to taste our wine for FREE <br> when you spend above RM 800. </p>
</div>
</div>
</div>
<div class="flipCard">
<div>
<img src="hightea.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> Savoury <br> Treats </h1>
</div>
<div class="flipCardBack">
<p class="headline"> Are you a <br> high tea craver? </p>
<p> You just need to pay for ONE <br> when two persons come for our <br> High Tea course. </p>
</div>
</div>
</div>
<div class="flipCard">
<div>
<img src="giveaway.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> SNS <br> Giveaway </h1>
</div>
<div class="flipCardBack">
<p class="headline"> Everyone loves giveaways! <br> Who doesn't? </p>
<p> Visit our social media pages now <br> to participate in the <br> giveaway contest! </p>
</div>
</div>
</div>
<div class="flipCard">
<div>
<img src="hightea2.jpg" class="pic">
</div>
<div class="flipCardInner">
<div class="flipCardFront">
<h1> TGIF <br> Promo </h1>
</div>
<div class="flipCardBack">
<p class="headline"> Thanks God, <br> It's Friday! </p>
<p> Every Friday evening, <br> we will be featuring a <br> 20% discount on all items. </p>
</div>
</div>
</div>