<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 ----------> <!-- Page Content --> <div class="container"> <div class="row"> <div class="col-md-12 portfolio-item"> <p class="text-center">Test</p> </div> </div> <!-- Projects Row --> <div class="row"> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" alt=""> </a> <p class="text-center">Test</p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" alt=""> </a> <p class="text-center">Test</p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" alt=""> </a> <p class="text-center">Test</p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" alt=""> </a> <p class="text-center">Test</p> </div> </div> <!-- /.row --> <!-- Projects Row --> <div class="row"> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" alt=""> </a> <p class="text-center">Test</p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" alt=""> </a> <p class="text-center">Test</p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" alt=""> </a> <p class="text-center">Test</p> </div> <div class="col-md-3 portfolio-item"> <a href="#"> <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" alt=""> </a> <p class="text-center">Test</p> </div> </div> <!-- /.row --> </div>

.portfolio-item { margin-bottom: 25px; } img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); margin-bottom:20px; } img:hover { filter: none; /* IE6-9 */ -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */ }