Images

Styles for image thumbnails and hover effects.

Thumbnail

...
    
        <img src="assets/img/club-workspace.jp" alt="..." class="border-secondary img-thumbnail">
    

Rising

Add .img-rising to create a rising hover effect.

...
    
        <figure class="img-rising d-inline-block">
            <img src="assets/img/sofa-cat.jpg" alt="..." class="img-fluid">
        </figure>
    

Scale

Add .img-scale and .img-wrap to scale an image on hover.

...
    
        <figure class="img-scale d-inline-block">
            <div class="img-wrap">
                <img src="assets/img/modern-kitchen.jpg" alt="..." class="img-fluid">
            </div>
        </figure>
    

Color

Add .img-color to colorize an image on hover.

...
    
        <figure class="img-color d-inline-block">
            <img src="assets/img/club-workspace.jpg" alt="..." class="img-fluid">
        </figure>
    

Overlay

Add .img-overlay and .img-hover to create an overlay effect on hover.

...

View Project

    
        <figure class="img-overlay d-inline-block">
            <img src="assets/img/modern-room.jpg" alt="..." class="img-fluid">
            <div class="img-hover">
                <p class="img-text">View Project</p>
            </div>
        </figure>
    

Bootstrap Documentation