Background Image Hover Scroll Effect Using Pure CSS

Here we are showing you how to create a background image hover scroll effect by using the Bootstrap framework and some CSS without any JavaScript code. You know it is the most useful and attractive effect that we can apply to website images like our team and portfolio sections.

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="img thumbnail-one">
                <div class="img-caption">
                    <h5>First Image</h5>
                    <p>Lorem Ipsum is simply dummy text of the printing</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="img thumbnail-two">
                <div class="img-caption">
                    <h5>Second Image</h5>
                    <p>Lorem Ipsum is simply dummy text of the printing</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="img thumbnail-three">
                <div class="img-caption">
                    <h5>Third Image</h5>
                    <p>Lorem Ipsum is simply dummy text of the printing</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="img thumbnail-four">
                <div class="img-caption">
                    <h5>Fourth Image</h5>
                    <p>Lorem Ipsum is simply dummy text of the printing</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body{
    background: #42A5F5;
}

/*-- Thumbnail Caption --*/
.img-caption {
    width: 100%;
    position: absolute;
    bottom: 0px;
    background-color: #fff;
    line-height: 20px;
    text-align: center;
    padding: 20px 15px 0px;
}
.img-caption p{
    font-size: 14px;
}
.img {
    width: 100%;
    height: 500px;
    border: 3px solid #fff;
    margin: 30px 0px;
    box-shadow: 0px 0px 15px 0px #757575;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 1s;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: relative;
}
.img:hover{
    border-bottom: 10px solid #03A9F4;
    background-position: bottom center;
}

/*--There are thumbnail background Images--*/
.thumbnail-one{
    background-image: url(/images/img-one.jpg);
}
.thumbnail-two{
    background-image: url(/images/img-two.jpg);
}
.thumbnail-three{
    background-image: url(/images/img-three.jpg);
}
.thumbnail-four{
    background-image: url(/images/img-four.jpg);
}