<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="text-center"> <div class="bg-secondary"> <div class="tall-img img-scroll"> <img width="auto" height="auto" src="https://vietbest.vn/images/design/event-page-standard-23110901.jpg" style="top: 0px" /> </div> </div> </div>

.tall-img { border-radius: 5px 5px 5px 5px; float: left; height: 700px; margin-left: 3px; overflow: hidden; position: relative; width: auto; border:5px solid #DDD; } .tall-img img { position: inherit; transition: top 20s ease-out 0s; }

$(document).ready(function () { var xH $('.img-scroll').hover( function () { xH = $(this).children("img").css("height"); xH = parseInt(xH); xH = xH - 150; xH = "-" + xH + "px"; $(this).children("img").css("top", xH); }, function () { $(this).children("img").css("top", "0px"); }); });