Transparent Color Hover Overlay

by dshilkret

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

  <div class="container py-2">
      <div class="row">
     <div class="col-md-6">
          <div class="full w-100">
             <div class="overlay-effect h-100 w-100"></div>
            <div>
              <h3><a href="#">Launch Websites <br>into Orbit</a></h3>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="half">
             <div class="overlay-effect h-100 w-100"></div>
            <div>
              <h3><a href="#">Reach Audiences <br>Across the Universe</a></h3>
            </div>
          </div>
          <div class="half2">
             <div class="overlay-effect h-100 w-100"></div>
            <div>
              <h3><a href="#">Create Designs <br>Beyond Imagination</a></h3>
            </div>
          </div>
        </div>
      </div>
  </div>

CSS

.full {
  background: url(https://raw.githubusercontent.com/solodev/transparent-overlay/master/overlay-img-1.jpg) 0 0 no-repeat;
  min-height: 634px;
}
.half {
  background: url(https://raw.githubusercontent.com/solodev/transparent-overlay/master/overlay-img-2.jpg) 0 0 no-repeat;
  min-height: 301px;
  margin-bottom: 30px;
}
.half2 {
  background: url(https://raw.githubusercontent.com/solodev/transparent-overlay/master/overlay-img-3.jpg) 0 0 no-repeat;
  min-height: 301px;
}
.full, .half, .half2 {
  background-size: cover;
  position: relative;
}   

.full:hover .overlay-effect, .half:hover .overlay-effect, .half2:hover .overlay-effect {
  opacity: 1;
  cursor: pointer;
}

.overlay-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(259, 67, 95, 0.7);
  overflow:hidden;
}

.full a,
.half a,
.half2 a {
  color: #fff;
}

.full h3,
.half h3,
.half2 h3 {
  padding: 15px 30px;
}

@media screen and (max-width: 768px) {
  .full, .half, .half2 {margin-bottom: 10px;}
}