"Image Animation"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- Top Destinations --> <div class="container-fluid topDest"> <div class="row"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h2 class="headings mrT20"> Top Dream Destinations </h2> <p class="text-center"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur animi, suscipit totam et porro repellat minima quibusdam optio sit incidunt rem! Necessitatibus obcaecati inventore eaque facere reiciendis ut repudiandae impedit. </p> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <a href="#" class="destLinks"> <div class="destiBoxWrap"> <img src="https://picsum.photos/id/943/400/500" alt="Image" title="Project" class="img-responsive width100"> <div class="destiBox hangBox"> <h4> Dubai Holidays </h4> <h5> 7 Nights from $500* PP </h5> <button class="btn mybtn"> View More </button> </div> </div> </a> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
/* -- Top Destinations -- */ .topDest {margin: 10px 0;} .topDest .headings {text-align: center;color: #ff3d00;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;} .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;} /* .topDest a.destLinks:hover .destiBox {top: 8%;transition: all ease 1s;} */ .hangBox {transform-origin: 50% 0; animation: moveIt 2.5s ease-in-out infinite;} @keyframes moveIt { 0%, 100% {transform: rotate(5deg); } 50% {transform: rotate(-5deg); } }

Questions / Comments: