<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 ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>black and white team card effect</h2> </div> <div class="col-md-3"> <img src="http://bestjquery.com/tutorial/hover-effect/demo119/images/img-1.jpg" alt=""> <p>John Doe</p> </div> <div class="col-md-3"> <img src="http://bestjquery.com/tutorial/hover-effect/demo119/images/img-2.jpg" alt=""> <p>John Doe</p> </div> <div class="col-md-3"> <img src="http://bestjquery.com/tutorial/hover-effect/demo119/images/img-3.jpg" alt=""> <p>John Doe</p> </div> <div class="col-md-3"> <img src="http://bestjquery.com/tutorial/hover-effect/demo119/images/img-4.jpg" alt=""> <p>John Doe</p> </div> </div> </div>

h2{ text-align:center !important; } img{ -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); cursor:pointer; max-width:100%; } img:hover{ -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%);-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } p{ text-align:center; font-weight:bold; }