<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 class="our__team_section"> <div class="container"> <h3>Our Staff</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. In itaque repellat unde dignissimos voluptate, quam quibusdam repudiandae vitae, maiores nulla dolorem? Expedita neque earum cum in commodi, sit tempore voluptates.</p> <div class="team-section"> <ul class="list-unstyled"> <li> <a href="#0" class="position-relative"> <img src="https://picsum.photos/id/177/400/300" alt=""> <div class="teamBox position-absolute"> <h4>Ravi Singh</h4> <p>Lorem ipsum dolor sit amet consectetur</p> </div> </a> </li> <li> <a href="#0" class="position-relative"> <img src="https://picsum.photos/id/342/400/301" alt=""> <div class="teamBox position-absolute"> <h4>Amit Kumar</h4> <p>adipisicing elit</p> </div> </a> </li> <li> <a href="#0" class="position-relative"> <img src="https://picsum.photos/id/338/400/301" alt=""> <div class="teamBox position-absolute"> <h4>Punit Choudhory</h4> <p>In itaque repellat unde dignissimos voluptate</p> </div> </a> </li> <li> <a href="#0" class="position-relative"> <img src="https://picsum.photos/id/453/400/305" alt=""> <div class="teamBox position-absolute"> <h4>Anita Singh</h4> <p>quam quibusdam repudiandae vitae, maiores</p> </div> </a> </li> <li> <a href="#0" class="position-relative"> <img src="https://picsum.photos/id/473/400/354" alt=""> <div class="teamBox position-absolute"> <h4>Sudesh Saksham</h4> <p>amet consectetur</p> </div> </a> </li> <li> <a href="#0" class="position-relative"> <img src="https://picsum.photos/id/1005/400/308" alt=""> <div class="teamBox position-absolute"> <h4>Surja Prajapati</h4> <p>In itaque repellat unde dignissimos voluptate</p> </div> </a> </li> <li> <a href="#0" class="position-relative"> <img src="https://picsum.photos/id/1/400/309" alt=""> <div class="teamBox position-absolute"> <h4>Anuj Sirohi</h4> <p>In itaque repellat unde dignissimos voluptate</p> </div> </a> </li> </ul> </div> </div> </section>

.our__team_section h3 { text-transform: uppercase; font-weight: 900; } .our__team_section p { max-width: 700px; font-size: 14px; } .team-section a { display: inline-block; } .team-section img { height: 300px; object-fit: cover; width: 100%; object-position: top; } .team-section .teamBox { top: 5%; width: 90%; height: 90%; left: 5%; display: flex; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.308); flex-direction: column; justify-content: center; transition: .2s linear; align-items: center; background-color: #fff; transform: scale(0); padding: 15px } .team-section .teamBox h4 { color: #000; font-size: 18px; } .team-section .teamBox p { color: #000 } .team-section ul li:hover .teamBox { transform: scale(1); } .team-section ul { text-align: center; } .team-section ul li { display: inline-block; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.308); position: relative; transition: .5s ease-in-out; } .team-section ul li:hover { z-index: 99999; transform: translateY(-10px); } .team-section ul li:nth-child(1) { max-width: 25%; margin: 0 15px; top: 80px; } .team-section ul li:nth-child(2) { margin: 0 15px; max-width: 25%; top: 150px; } .team-section ul li:nth-child(3) { max-width: 25%; margin: 0 15px; } .team-section ul li:nth-child(4) { max-width: 20%; margin: 0 25px; top: -20px } .team-section ul li:nth-child(5) { max-width: 20%; margin: 0 25px; } .team-section ul li:nth-child(6) { max-width: 20%; margin: 0 25px; top: -50px } .team-section ul li:nth-child(7) { max-width: 20%; margin: 0 25px; top: -20px } @media only screen and (max-width:767px) { .team-section ul li { max-width: 100% !important; margin: 0 !important; margin-bottom: 20px !important; top: 0 !important } }