<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> <div class="container"> <p class="work text-center">Work team</p> <h4 class="display-4 text-center">Meet Our Member</h4> <p class="lead text-center" style="padding-left: 200px;padding-right: 200px;">Our have the best people with whom we can overcome all obstacles in our way, with whom we confidently look to the future</p> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <img src="https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg" alt="testimonial-img" class="hover-effect w-100 mx-auto d-block"> <!--hover divison--> <div class="social-link"> <ul> <li><i class="fa fa-facebook" aria-hidden="true"></i></li> <li><i class="fa fa-instagram" aria-hidden="true"></i></li> <li><i class="fa fa-linkedin" aria-hidden="true"></i></li> <li><i class="fa fa-google" aria-hidden="true"></i></li> </ul> </div> <!--hover divison--> <br> <h5 style="font-family: fantasy;">Lorem Ipsum</h5> <h6 style="color: coral;">Founder</h6> <p>Lorem ipsum dolor sit amet, tetur adipisicing elit, sed</p> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <img src="https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg" alt="testimonial-img" class="hover-effect w-100 mx-auto d-block"> <!--hover divison--> <div class="social-link"> <ul> <li><i class="fa fa-facebook" aria-hidden="true"></i></li> <li><i class="fa fa-instagram" aria-hidden="true"></i></li> <li><i class="fa fa-linkedin" aria-hidden="true"></i></li> <li><i class="fa fa-google" aria-hidden="true"></i></li> </ul> </div> <!--hover divison--> <br> <h5 style="font-family: fantasy;">Lorem Ipsum</h5> <h6 style="color: coral;">Designer</h6> <p>Lorem ipsum dolor sit amet, tetur adipisicing elit, sed</p> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <img src="https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg" alt="testimonial-img" class="hover-effect w-100 mx-auto d-block"> <!--hover divison--> <div class="social-link"> <ul> <li><i class="fa fa-facebook" aria-hidden="true"></i></li> <li><i class="fa fa-instagram" aria-hidden="true"></i></li> <li><i class="fa fa-linkedin" aria-hidden="true"></i></li> <li><i class="fa fa-google" aria-hidden="true"></i></li> </ul> </div> <!--hover divison--> <br> <h5 style="font-family: fantasy;">Lorem Ipsum</h5> <h6 style="color: coral;">Engineer</h6> <p>Lorem ipsum dolor sit amet, tetur adipisicing elit, sed</p> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xl-3"> <img src="https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg" alt="testimonial-img" class="hover-effect w-100 mx-auto d-block"> <!--hover divison--> <div class="social-link"> <ul> <li><i class="fa fa-facebook" aria-hidden="true"></i></li> <li><i class="fa fa-instagram" aria-hidden="true"></i></li> <li><i class="fa fa-linkedin" aria-hidden="true"></i></li> <li><i class="fa fa-google" aria-hidden="true"></i></li> </ul> </div> <!--hover divison--> <br> <h5 style="font-family: fantasy;">Lorem Ipsum</h5> <h6 style="color: coral;">Architect</h6> <p>Lorem ipsum dolor sit amet, tetur adipisicing elit, sed</p> </div> </div> </div> </section>

.hover-effect { position: relative;} .social-link { position: absolute; top: 60px; color: white; opacity: 0; height: 400px; width: 400px; transition: .5s ease;} .social-link:hover{ opacity: 1;} .social-link>ul li { list-style-type: none; padding-bottom: 15px;} .work { font-size: 25px; font-family: fantasy; margin-bottom: -3px; color: coral;}