<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section class="work-info"> <div class="container"> <h1 class="text-center">SECTION NAME</h1> <hr> <div class="row"> <div class=" col-md-6 col-sm-12"> <div class="work-item"> <a href="#"> <img src="http://suddenimpactwebdesign.com/wp-content/uploads/2015/01/me.jpg" class="img-responsive"> </a> </div> </div> <div class="col-md-6 col-sm-12 "> <div class="work-item"> <a href="#"> <img src="https://www.rkaink.com/wp-content/uploads/2016/04/Custom-Web-Design-for-Amanda-Abella-by-RKA-ink-2-500x333.jpg" class="img-responsive"> </a> </div> </div> <div class="col-md-6 col-sm-12 "> <div class="work-item"> <a href="#"> <img src="http://www.karniesolutions.com/img/portfolio/idea-best.jpg" class="img-responsive"> </a> </div> </div> <div class=" col-md-6 col-sm-12 col-xs-12"> <div class="work-item"> <a href="#"> <img src="https://static1.squarespace.com/static/5056838724acbaa64593ee7b/t/561472dfe4b0f9222d2e8c6b/1444180707338/?format=500w" class="img-responsive"> </a> </div> </div> </div><!--end of row--> </div><!--end of container--> </section> <!--end of work section-->

* { transition: all .5s; } .img-responsive { width: 100%; <!-- important--> } hr{ color: #e74c3c; background: rgb(231, 76, 60) !important; height: 5px; width: 150px; border-top:0px; } .work-item{ margin-bottom: 15px; overflow: hidden; } .work-info{ padding:50px 0px; background-color: #fff; } .work-item a { display: block; overflow: hidden; } .work-item a img{ margin: 0 auto; } .work-item>a>img:hover{ transform: scale(1.2,1.2); }