Skip to main content

Images

Styles for image thumbnails and hover effects.

Thumbnail

...
<img src="assets/img/club-workspace.jpg" alt="..." class="img-thumbnail">

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>

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>

Bootstrap Documentation