Hover

Documentation and examples for common hover utilities to control hover effects.
Custom Arizona Bootstrap Utility

On this page

Put the .hover class on a parent element, and a .hover-* class on each child element that should change on hover. The children’s hover effects (the .hover-* classes) turn on when you hover over the parent, or when the parent or anything inside it has keyboard focus. For example, when you press Tab to reach a .stretched-link inside a card, the card’s hover effects turn on.

Text Decoration

Add a text underline on hover with the .hover class on the parent element and the .hover-text-underline class on the target child element.

Card with Hover Underline

This card's title should have an underline applied when the card receives hover or focus.

This is a link

html

<div class="card hover" style="width: 20rem;">
  <div class="card-body">
    <h3 class="card-title mb-3 h5 fw-bold hover-text-underline">Card with Hover Underline</h3>
    <div class="card-text">
      <p>This card's title should have an underline applied when the card receives hover or focus.</p>
    </div>
    <div class="mt-auto">
      <a href="#top" class="stretched-link">This is a link</a>
    </div>
  </div>
</div>

Image Zoom

Add an image zoom-in effect on hover with the .hover class on the parent element and the .hover-img-zoom-in class on the target child image element.

In this example, the .overflow-hidden class is added to a <div> element surrounding the image in order to contain the image when the hover effect is applied. The card also has .overflow-hidden, so the zoomed image stays inside the card’s round corners. Learn more about the overflow utility classes.

Card with Image Zoom

This card's image should zoom in when the card receives hover or focus.

This is a link

html

<div class="card hover overflow-hidden" style="width: 20rem;">
  <div class="position-relative overflow-hidden">
    <img class="card-img-top img-fluid hover-img-zoom-in" src="/arizona-bootstrap/v5/docs/5.3/assets/img/photo-gallery-demo/gallery-img-1.jpg" alt="University of Arizona Spring Fling" title="">
  </div>
  <div class="card-body">
    <h3 class="card-title mb-3 h5 fw-bold">Card with Image Zoom</h3>
    <div class="card-text">
      <p>This card's image should zoom in when the card receives hover or focus.</p>
    </div>
    <div class="mt-auto">
      <a href="#top" class="stretched-link">This is a link</a>
    </div>
  </div>
</div>

Card Colors

On a .card, .hover together with .bg-cloud also changes the card’s colors on hover: the background, the body text, the title, the icon, and the links. See Cards: Icons for the full example and the rules. Only .bg-cloud turns this on. .text-bg-cloud and the other .bg-* classes do not.

Card with Hover Colors

This card's colors should change when the card receives hover or focus.

html

<div class="card bg-cloud hover" style="width: 20rem;">
  <div class="card-body">
    <h3 class="card-title h5 fw-bold mb-2">
      <a href="#top" class="stretched-link text-reset text-decoration-none">Card with Hover Colors</a>
    </h3>
    <p class="card-text">This card's colors should change when the card receives hover or focus.</p>
  </div>
</div>