<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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="land"> <div class="col-md-12"> <div class="head"> <a href="#top" id="bottom"> <h1>OUR <span>WORK</span></h1></a> </div> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco </p> <p>laboris nisi ut aliquip ex ea commodo consequat</p> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 img-hvr hvr-3"> <img src="http://pre08.deviantart.net/1feb/th/pre/i/2015/090/2/6/daisysmiles_by_jesusbuddy7-d219ssg.jpg"> <div class="text"> <h4>ABAZOO WEBSITE</h4> <p>UT enim ad minim, quis nostrud laborcris nisi ut aliquip ex ea commodo</p> <button class="button button4">HIRE US</button> </div> </div> <div class="col-xs-12 col-sm-4 img-hvr hvr-3"> <img src="http://pre08.deviantart.net/1feb/th/pre/i/2015/090/2/6/daisysmiles_by_jesusbuddy7-d219ssg.jpg"> <div class="text"> <h4>ABAZOO WEBSITE</h4> <p>UT enim ad minim, quis nostrud laborcris nisi ut aliquip ex ea commodo</p> <button class="button button4">HIRE US</button> </div> </div> </div> </div>

.land .head h1 { color: black; text-align: left; font-size: 40px; text-align: center; margin-top: 72px; } .land p { text-align: center; text-align: 1; text-transform: capitalize; } img { max-width: 100%; border-radius: 24px; width: 100%; height: 341px; } .img-hvr { position: relative; overflow: hidden; } .img-hvr:hover { cursor: pointer; } .img-hvr .text { position: absolute; margin: 0 15px; padding: 15px; z-index: 1; bottom: 0; left: 0; } .img-hvr.hvr-3 .text { mix-blend-mode: hard-light; right: 0; text-align: center; top: 0; opacity: 0; -moz-transition: background-color 0.3s linear 0s, opacity 0.3s linear 0s; -o-transition: background-color 0.3s linear 0s, opacity 0.3s linear 0s; -webkit-transition: background-color 0.3s linear, opacity 0.3s linear; -webkit-transition-delay: 0s, 0s; transition: background-color 0.3s linear 0s, opacity 0.3s linear 0s; border-radius: 7% } .img-hvr.hvr-3 .text h4 { font-size: 25px; font-weight: bold; margin-top: 9%; color: white; } .img-hvr.hvr-3:hover .text { opacity: 1; background-color: rgba(247, 96, 14, .9); } .text p { margin: 38px; font-size: 14px; color: white; line-height: 2; } .moved { margin-top: 67px; } .space { position: relative; top: 25px; } .text button { background-color: rgba(16, 26, 14, 0); border: 1px solid #d9edf7; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; width: 190px; height: 38px; border-radius: 7px; opacity: 1; } .text button:hover {background-color: white;color:rgba(247, 95, 14, 0.9); border: none}