JSFiddle - React, Tailwind, and code Playground

by Oleh Aloshkin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-md-4 btn-wrap">
  <div class='btn-wrap__button'>
    <input type='checkbox' class='btn-wrap__input'>
    <div class="btn-wrap__overlay"></div>
    <div class="btn-wrap__back"></div>
  </div>
</div>

SCSS

.btn-wrap {
  .btn-wrap__input {
     width: 100%;
     height: 300px;
     position: absolute;
     z-index: 3;
     margin: 0;
     opacity: 0;
     &:checked {
       + .btn-wrap__overlay {
         opacity: .7;
       }
       &:hover {
         + .btn-wrap__overlay {
           opacity: .7;
         }  
       }
     }
     &:hover {
      + .btn-wrap__overlay {
         opacity: .5;
       }
    }
  }
  .btn-wrap__button {
    height: 300px;
    width: 100%;
  }
  .btn-wrap__back {
    position: absolute;
    height: 300px;
    width: 100%;
    z-index: 1;
    color: white;
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7ixV_dB22rsPTNwbph6uHl62bSSNHK_TQLw1gMOPmoWErkRdK');
    
  }
  .btn-wrap__overlay {
    background: black;
    opacity: 0;
    height: 300px;
    position: absolute;
    z-index: 2;
    width: 100%;
  }
}