'Boostrap5 flipping images with links and text

I'm trying to code an HTML5 landing page with bootstrap. I'm dividing screen into 2 md-cols with an image in each column. I want to put a text over each image and flipping effect on hover than brings 4 more logo images with links to external pages.

Below is what I got so far:

<main class="p-3 my-auto">
   <div class="row">
      <div class="col-md-6 mb-5">
         <div class="imgContent w-100 p-1 bg-light rounded-3">
            <img src="img/eye.jpg" class="img-fluid"/>
         </div>
         <div class="links">
            <div class="row">
               <div class="col-xs-2">logo1</div>
               <div class="col-xs-2">logo2</div>
            </div>
            <div class="row">
               <div class="col-xs-2">logo3</div>
               <div class="col-xs-2">logo4</div>
            </div>
         </div>
      </div>
      <div class="col-md-6">
         <div class="imgContent w-100 p-1 bg-light rounded-3">
            <img src="img/joint.jpg" class="img-fluid"/>
         </div>
         <div class="links">
            <div class="row">
               <div class="col-xs-2">logo1</div>
               <div class="col-xs-2">logo2</div>
            </div>
            <div class="row">
               <div class="col-xs-2">logo3</div>
               <div class="col-xs-2">logo4</div>
            </div>
         </div>
      </div>
   </div>
</main>

Any idea? Thanks in advance

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions