<div class="container my-4">
  <h1><code>.btn-img</code> Custom Class</h1>
  <p>Button Image Gradient Hover</p>

  <h2>Style variations</h2>
  <p>Add these additional classes to customize the style</p>
  <div class="row">
    <div class="col-md-4">
      <h4>gradient only</h4>
      <code>.btn-img .btn-img-gradient</code>
      <a href="#" class="btn-img btn-img-gradient">
   <img src="https://placeimg.com/700/250/arch" alt="" class="img-fluid">
</a>
    </div>
    <div class="col-md-4">
      <h4>drop shadow only</h4>
      <code>.btn-img .btn-img-shadow</code>
      <a href="#" class="btn-img btn-img-shadow">
   <img src="https://dummyimage.com/700x250/e3e3e3/424242&text=hover/tap+me" alt="" class="img-fluid">
</a>
    </div>

    <div class="col-md-4">
      <h4>both gradient and drop shadow</h4>
      <code>.btn-img .btn-img-combo</code>
      <a href="#" class="btn-img btn-img-combo">
   <img src="https://placeimg.com/700/250/nature/grayscale" alt="" class="img-fluid">
</a>
    </div>

  </div>
</div>
<!-- /.container -->
/*
Anchor image gradient overlay
*/

.btn-img {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.btn-img:active {
  opacity:0.3;
  transition: opacity 0.1s;
}


/* 
-------------------------
.btn-img-gradient
*/


.btn-img-gradient:hover::before, .btn-img-combo:hover::before {
  opacity: 1;
  transition: opacity 0.3s;
}

.btn-img-gradient::before, .btn-img-combo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: 99;
  background-image: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.6),
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.6)
  );
  opacity: 0;
  transition: opacity 0.3s;
}



/* 
-------------------------
.btn-img-shadow
*/

.btn-img-shadow, .btn-img-combo {
  box-shadow: none;
  transition: box-shadow 0.5s;
}


.btn-img-shadow:hover, .btn-img-combo:hover  {
  border: 1px solid rgba(0,0,0,.3);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}


External CSS

  1. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/master/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://cdn.rawgit.com/JacobLett/bootstrap4-latest/504729ba/bootstrap-4-latest.min.js