<div class="box-shadow-transition box-shadow-below box-shadow-below-hover">
  <img  src="https://orangepulley.com/wp-content/uploads/2016/04/bigstock-Cute-little-ginger-kitten-is-s-102929387_600x400.jpg" alt="Smiley face" height="200" width="300">
</div>

.box-shadow-transition img {
   -webkit-transition: all 0.50s ease-in-out;
  -moz-transition: all 0.50s ease-in-out;
  -ms-transition: all 0.50s ease-in-out;
  -o-transition: all 0.50s ease-in-out;
}
.box-shadow-below img {
  -webkit-box-shadow: 0 8px 12px -6px black;
   -moz-box-shadow: 0 8px 12px -6px black;
   box-shadow: 0 8px 12px -6px black;
}
.box-shadow-below-hover img:hover {
  -webkit-box-shadow: 0 12px 18px -6px black;
     -moz-box-shadow: 0 12px 18px -6px black;
          box-shadow: 0 12px 18px -6px black;
}