<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="slides"> <div class="container-fluid"> <div class="row"> <div class="col-md-3 col-6 mb-2"> <div class="imgtext"> <img src="https://www.impactbnd.com/hubfs/blog-image-uploads/best-about-us-pages.jpg" class="img-fluid img-size"> <div class="text1"> <a href=""><span>ABOUT US</span></a> </div> </div> </div> <div class="col-md-3 col-6 mb-2"> <div class="imgtext"> <img src="https://commodoremgt.com/wp-content/uploads/2020/06/RNFetchBlobTmp_77083q8iho5svh77inxpt-1200x675.jpg" class="img-fluid img-size"> <div class="text1"> <a href=""><span>OUR FACILITIES</span></a> </div> </div> </div> <div class="col-md-3 col-6 mb-2"> <div class="imgtext"> <img src="https://www.proofhub.com/wp-content/uploads/2019/01/Teamwork-Skills-in-the-Workplace.jpeg" alt="image" class="img-fluid img-size"> <div class="text1"> <a href=""><span>OUR VISION & MOTTO</span></a> </div> </div> </div> <div class="col-md-3 col-6 mb-2"> <div class="imgtext"> <img src="https://p0.pikist.com/photos/248/615/note-notebook-pen-laptop-computer-article-to-write-the-work-work.jpg" alt="image" class="img-fluid img-size"> <div class="text1"> <a href=""><span>ADMISSION QUREY</span></a> </div> </div> </div> </div> </div> </section>

.imgtext { position: relative; } .imgtext:hover { transform: scale(1.05); transition: all 0.1s ease-out; } .img-size{ height:220px; object-fit:cover; } .text1 { bottom: 12px; position: absolute; width: 100%; text-align: center; } .text1 a { color: white; text-decoration: underline; font-family: Rubik; font-style: SemiBold; Font-size: 20px; text-decoration-color: red; } .text1 a:hover { color: white; }