Hover

Documentation and examples for common hover utilities to control hover effects.

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.

This is a card title

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

This is a link 
<div class="card hover" style="width: 18rem;">
  <div class="card-body">
    <h2 class="hover-text-underline card-title mt-0 h4">This is a card title</h2>
    <p>This card's title should have an underline applied when it receives hover or focus anywhere on the card.</p>
    <a class="stretched-link" href="#">This is a link</a>
  </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. Learn more about the overflow utility classes.

University of Arizona Spring Fling

This is a card title

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

This is a link 
<div class="card bg-warm-gray hover" style="width: 18rem;">
  <div class="overflow-hidden">
    <img class="hover-img-zoom-in card-img" src="/arizona-bootstrap/docs/2.0/assets/img/photo-gallery-demo/gallery-img-2.jpg" alt="University of Arizona Spring Fling" title="">
  </div>
  <div class="card-body">
    <h2 class="hover-text-underline card-title mt-0 h4">This is a card title</h2>
    <p>This card's title should have an underline applied when it receives hover or focus anywhere on the card.</p>
    <a class="stretched-link" href="#">This is a link</a>
  </div>
</div>