"Awesome Responsive Background Image Zoom in Animation using pure HTML and CSS"
Bootstrap 3.0.0 Snippet by nazmul_tanvir

<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="text-center" style="padding-bottom:30px;"> <h3>Awesome Responsive Background Image Zoom in Animation using pure HTML and CSS</h3> </div> <div class="row noPadding"> <div class="col-md-12 noPadding box" > <div class="col-md-4 first"> <div class="textbox"> <h1>News Feed</h1> <hr> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> <div class="col-md-4 second"> <div class="textbox"> <h1>News Feed</h1> <hr> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> <div class="col-md-4 thrid"> <div class="textbox"> <h1>News Feed</h1> <hr> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div> </div>
.noPadding{ padding:0px; } .box{ width:100%; height:160px; background:red; } .box h1{ font-size:20px; color:red; } .textbox{ padding:20px 0px 0px 50px; } .textbox hr{ color:red; border-bottom:1px red solid; margin:0px 250px 0px 0px; } .textbox p{ padding-top:5px; color:white; font-weight:200; } .box .first{ background: url(https://tanvir.xyz/demo-images/we-are-hiring-bg.jpg) no-repeat center; transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; background-size:100%; height:100%; } .first:hover{ background-size: 150%; -webkit-transition: all 1.9s ease-in-out; } .second{ background: url(https://tanvir.xyz/demo-images/BG-3.png) no-repeat center; transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; background-size:100%; height:100%; } .second:hover{ background-size: 150%; -webkit-transition: all 1.9s ease-in-out; } .thrid{ background: url(https://tanvir.xyz/demo-images/trending-bg.png) no-repeat center; transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; background-size:100%; height:100%; } .thrid:hover{ background-size: 150%; -webkit-transition: all 1.9s ease-in-out; }

Related: See More


Questions / Comments: