Cacher is the code snippet organizer for pro developers

<div class="serv_div">
   <ul>
     <li>
     <a href="senior-care-center-skilled-nursing">
     <img src="wp-content/themes/metroresource/images/non-home/thumb-52237462.jpg" alt="group of doctors and nurses">
     <span>Skilled Nursing</span>
     </a>
     </li>
   </ul>
</div>

<style>
.serv_div{margin-top: 15px;}
.serv_div ul{text-align: center;}
.serv_div ul li{width: 280px;max-width:100%;min-height: 180px;display: inline-block;vertical-align: top;border-radius:5px;overflow: hidden;margin: 0 10px 15px;text-align: center;padding: 0;box-shadow: 1px 1px 25px #928484;}
.serv_div ul li a{display: block;width: 100%;position: relative;}
.serv_div ul li a:after{content:'';width: 100%; height: 100%; position: absolute; top:0;left:0;background: rgba(85, 89, 114, 0.5); opacity: 1; transition: 2s;}
.serv_div ul li a:hover:after{transition: all ease-in 300ms;opacity: 0;}
.serv_div ul li span{position: absolute;bottom: 0;z-index: 22;color: #fff;width: 100%;left: 0;padding: 10px;background: rgba(0, 36, 255, 0.5);}
/*Alternate background for the span*/
/*background: linear-gradient(270deg,#d63737 16%,#21217a 71%);*/

@media only screen
and (max-width : 600px) {
  .serv_div ul li{margin: 0 0 15px;}
  .serv_div ul li a::after{display: none;}
}
</style>