<div class="row m-0">
<div class="col-sm-6 col-md-4 p-0">
<div class="single-service">
<img src="https://images.pexels.com/photos/136404/pexels-photo-136404.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<div class="single-service-ovelay">
<img src="gym.png" style="width:64px;">
<h4>Cross Fit</h4>
<p>Improve your body strength. Join our group trainings and get in shape fast.</p>
<a href="#" class="btn btn-success">Readmore </a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 p-0">
<div class="single-service">
<img src="https://images.pexels.com/photos/17840/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
<div class="single-service-ovelay">
<img src="gym.png" style="width:64px;">
<h4>Cross Fit</h4>
<p>Improve your body strength. Join our group trainings and get in shape fast.</p>
<a href="#" class="btn btn-success">Readmore </a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 p-0">
<div class="single-service">
<img src="https://images.pexels.com/photos/17840/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
<div class="single-service-ovelay">
<img src="gym.png" style="width:64px;">
<h4>Cross Fit</h4>
<p>Improve your body strength. Join our group trainings and get in shape fast.</p>
<a href="#" class="btn btn-success">Readmore </a>
</div>
</div>
</div>
</div>
<div class="row m-0">
<div class="col-sm-6 col-md-4 p-0">
<div class="single-service">
<img src="https://images.pexels.com/photos/791763/pexels-photo-791763.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<div class="single-service-ovelay">
<img src="gym.png" style="width:64px;">
<h4>Cross Fit</h4>
<p>Improve your body strength. Join our group trainings and get in shape fast.</p>
<a href="#" class="btn btn-success">Readmore </a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 p-0">
<div class="single-service">
<img src="https://images.pexels.com/photos/17840/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
<div class="single-service-ovelay">
<img src="gym.png" style="width:64px;">
<h4>Cross Fit</h4>
<p>Improve your body strength. Join our group trainings and get in shape fast.</p>
<a href="#" class="btn btn-success">Readmore </a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 p-0">
<div class="single-service">
<img src="https://images.pexels.com/photos/136404/pexels-photo-136404.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<div class="single-service-ovelay">
<img src="gym.png" style="width:64px;">
<h4>Cross Fit</h4>
<p>Improve your body strength. Join our group trainings and get in shape fast.</p>
<a href="#" class="btn btn-success">Readmore </a>
</div>
</div>
</div>
</div>
.single-service { color:#fff; float:left;}
.single-service{position:relative;text-align:center}
.single-service-ovelay,.single-service:after{position:absolute;left:0;transition:all .5s ease-out}
.single-service:after{content:'';top:0;height:100%;width:100%}
.service-3-grid .single-service{width:33.33%}
.single-service img{width:100%}
.single-service-ovelay{padding:60px;width:100%;top:59%;transform:translateY(-50%);z-index:1}
.single-service-ovelay i{font-size:60px;margin-bottom:15px;display:inline-block;line-height:1}
.single-service-ovelay h4{text-transform:uppercase;font-weight:700;margin-bottom:15px}
.single-service-ovelay a i{font-size:14px;margin-bottom:0}
.single-service-ovelay a,.single-service-ovelay p{opacity:0;visibility:hidden;transition:all .5s ease-out}
.single-service:hover .single-service-ovelay a,.single-service:hover
.single-service-ovelay p{opacity:1;visibility:visible}
.single-service:hover .single-service-ovelay{top:50%}
.single-service:hover:after{background-image:linear-gradient(to right,rgba(62,214,115,.5),rgba(157,218,62,.5))!important}