Test

by DeepakKamat

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="jumbotron jumbotron-fluid my-jumbotron">
  <div class="container">
    <h1 class="display-4">This is a slide item.</h1>
    <p class="lead">The quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog.</p>
  </div>
</div>

CSS

.my-jumbotron {
  background-color: #65b234;
  color: #fff;
  background-image: linear-gradient(45deg, rgba(255, 17, 40, .75), rgba(0, 0, 0, 0.25), rgba(17, 253, 255, 0.75)), url("https://images.unsplash.com/photo-1505759115705-e48bf15b15b6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=36c8d4b6e72bc8efb665956c314e5b89&auto=format&fit=crop&w=1352&q=80");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  height: 600px;
  transition: 0.2s all ease-in-out;
}

.my-jumbotron:hover {
  background-size: 120%;
}

.my-jumbotron h1 {
  color: yellow;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, .25);
}