Bootstrap Snippet Tall Image Auto Scrollable on mouse using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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");
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Tall Image Auto Scrollable on mouse"
Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Tall Image Auto Scrollable on mouse" Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Tall Image Auto Scrollable on mouse"
Bootstrap 4.1.1 Snippet by tieusuquay79