Как централизовать флип-карту на изображение?

Question

Я выполняю задание по оформлению веб-страницы. Я хотел бы централизовать флип-карту (в розовом цвете, как показано ниже) на изображениях. Как мне это сделать? Я нашел через веб-сайт и искал пути для его решения, но все еще не смог найти его. (Первые 5 изображений - это изображения, на которые необходимо централизовать флип-карты)

.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;
           position: absolute;}

.flipCardInner {position: absolute;
                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;}

 <table align="center" cellspacing="50px">
            <tr>
                <td>  
                    <img src="april.jpg" class="pic">
                    
                    <div class="flipCard">
                        
                    <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>  
                
                </td>

                <td>
                    <img src="hightea.jpg" class="pic">
                    
                    <div class="flipCard">
                        
                        <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>
              
                </td>

                <td>
                    <img src="wine.jpg" class="pic">
                    
                    <div class="flipCard">
                        
                        <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>
               
                </td>
                
            </tr>
        </table>

        <table align="center" cellspacing="50px" >
            <tr>
                <td> 
                    <img src="giveaway.jpg" class="pic">
                   
                    <div class="flipCard">
                       
                        <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>
                
                </td>

                <td>
                    <img src="tgif.webp" class="pic">
                   
                    <div class="flipCard">
                        
                        <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>
                
                </td>
            </tr>
        </table>