<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="new"> <h1>new trick hover</h1> </div> <div class="col-md-4"> <div class="box"> <div class="hover"> <img src="data:image/png;base64,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" class="img-responsive"> </div> </div> </div> </div> </div>

.new h1 { font-size:24px; text-transform:uppercase; font-family:century gothic; letter-spacing:1px; font-weight:600; text-align:center; } .box { background-image:url(http://www.orangesmile.com/common/img_cities_original/new-delhi--2106102-10.jpg); height:400px; width:100%; background-position:center; background-repeat:no-repeat; background-color:#000; position:absolute; } .hover { width:100%; height:500px; background-color:#000000a1; opacity 0.5; } .hover:hover { background-color:transparent; -webkit-transition-duration: 0.3s; } .hover img { top:30%; left:15%; position:relative; }