<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Paytone+One" rel="stylesheet"> <script src="https://use.fontawesome.com/a152d19b3e.js"></script> <section id="service" class="social-section"> <!-- Page Content --> <div class="container" > <div class="row" style="padding-top:70px" id="tabs"> <a href="#"><div class="col-md-4 col-sm-4 col-xs-4 hover"> <img src="http://via.placeholder.com/380x200" class="img-responsive"/> <h3 style="color:#2C9ED7">Title 1</h3> Column 1 - span 4 columns in desktops <br/> something interesting.<br/> #lol #TODD<br/> <i class="fa fa-instagram fa-3x" aria-hidden="true"></i> </div></a> <a href="#"><div class="col-md-4 col-sm-4 col-xs-4 hover"> <img src="http://via.placeholder.com/380x200" class="img-responsive"/> <h3 style="color:#4C8F90">Title 2</h3> Column 2 - span 4 columns in desktops <br/> dead turtle is a great drink! <br /> #lol #MYNAMEISTODD<br/> <i class="fa fa-instagram fa-3x" aria-hidden="true"></i> </div></a> <a href="#"><div class="col-md-4 col-sm-4 col-xs-4 hover"> <img src="http://via.placeholder.com/380x200" class="img-responsive"/> <h3 style="color:#CF5045">Title 3</h3> Column 3 - span 4 columns in desktops <br/> written something here!<br /> #lol #deadturtleshot<br/> <i class="fa fa-instagram fa-3x" aria-hidden="true"></i> </div></a> </div> </div> <!-- /.container --> </section>

.social-section { font-family: 'Paytone One', sans-serif; padding-top:20px; padding-bottom: 60px; color:black; text-align: center; background:white; } h3{ font-family: 'Paytone One', sans-serif; } .hover{ color:black; } .hover:hover{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding:18px; margin-top: -25px; }