<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid topDest"> <div class="container"> <div class=""> <div class="col-xs-12"> <h2 class="headings mrT20"> Top Dream Destinations </h2> <p class="text-center"> We will provide you with amazing travel packages ranging from Adventure package, Wildlife package, Cruise tourism package, Family tourism packages and Honeymoon packages.</p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <a href="#myModal" data-toggle="modal" class="destLinks"> <div class="destiBoxWrap"> <img src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="destiBox hangBox"> <h4> Dubai Holidays </h4> <h5> 4 Nights/5 Day </h5> <h4 class="col1">$499.76</h4> <button class="btn btn-danger mybtn"> View More </button> </div> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <a href="#myModal" data-toggle="modal" class="destLinks"> <div class="destiBoxWrap"> <img src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="destiBox hangBox"> <h4> Madrid Holidays </h4> <h5> 5 Nights/6 Day </h5> <h4 class="col1">$599.76</h4> <button class="btn btn-danger mybtn"> View More </button> </div> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <a href="#myModal" data-toggle="modal" class="destLinks"> <div class="destiBoxWrap"> <img src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="destiBox hangBox"> <h4> Honolulu Holidays </h4> <h5> 9 Nights/10 Day </h5> <h4 class="col1">$999.76</h4> <button class="btn btn-danger mybtn"> View More </button> </div> </div> </a> </div> </div> </div> </div>

.topDest {margin: 10px 0;} .topDest .headings {text-align: center;margin-bottom: 20px;font-weight: 600;} .topDest a.destLinks {text-decoration: none;color: #000;} .topDest .destiBoxWrap {position: relative;overflow: hidden; height: 285px;border-bottom: 1px solid #d5e5ff;margin-bottom: 30px;} .topDest .destiBoxWrap .destiBox {text-align: center;padding: 20px 10px;background-color: rgba(0, 0, 0, 0.5); width: 90%; position: absolute;left: 5%; bottom: 5%;transition: all ease 3s;border-bottom: solid 2px #ffc904;} .topDest .destiBoxWrap .destiBox h4 {font-size: 26px; font-weight: 600;margin-top: 0px; color: #fff;} .topDest .destiBoxWrap .destiBox h5 {font-size: 18px; font-weight: 500;color: #fff;} .topDest .destiBoxWrap .destiBox p {line-height: 25px;} .topDest .destiBoxWrap .destiBox .btn {padding: 8px 20px;} .hangBox {transform-origin: 50% 0; animation: moveIt 2.5s ease-in-out infinite;} @keyframes moveIt { 0%, 100% {transform: rotate(5deg); } 50% {transform: rotate(-5deg); } } @keyframes moveShade { 0% {transform: translateX(-20px) scale(1.4, .5); filter: blur(20px);} 50% {filter: blur(3px); } 100% {transform: translateX(20px) scale(1.4, .5); filter: blur(20px);} }