Как сделать так, чтобы изображения не перекрывали друг друга?

Question

Я хочу разместить откидные карточки на изображениях, чтобы при наведении курсора на перекидную карточку она переворачивалась, но изображение не переворачивалось. Я могу вставить флип-карты на изображения, но изображения, кажется, перекрывают друг друга? Есть ли способы избавиться от наложения изображений? А также я хотел бы сделать флип-карты в центре изображения.

.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>