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">
  <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">
  <img src="assets/img/modern-room.jpg" alt="" class="img-fluid">
  <div class="img-hover">
    <div class="img-text">View Project</div>
  </div>
</figure>

Rising

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

<figure class="img-rising">
  <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">
  <div class="img-wrap">
    <img src="assets/img/modern-kitchen.jpg" alt="" class="img-fluid">
  </div>
</figure>

Bootstrap Documentation