<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="col-md-4 center-block"> <div class="section-box-two"> <!----> <figure> <h3>Service</h3> <p>Lorem Ipsu</p> <a href="#" class="btn btn-read">Read More</a> </figure> <img src="http://www.tayloredwebs.co.uk/wp-content/uploads/2016/06/web-design-and-graphic-design-wallpapers.jpg" class="img-responsive"/> </div> </div> </div>

.section-box-two{ height: 250px; background: radial-gradient(#6e6e6e,#2f2f2f); background: -webkit-radial-gradient(#6e6e6e,#2f2f2f); background: -moz-radial-gradient(#6e6e6e,#2f2f2f); color: #fff; position: relative; overflow:hidden; } .section-box-two figure { position: absolute; text-align: center; padding: 19px; width: 100%; height: 100%; } .section-box-two img{ height: 100%; position: absolute; transition: ease-in-out .5s; -webkit-transition: ease-in-out .5s; -moz-transition: ease-in-out .5s; } .section-box-two:hover img{ transform: translate(-100%, -100%); -webkit-transform: translate(-100%, -100%); -moz-transform: translate(-100%, -100%); }

<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