CSS Card Overlay

May 31, 2020

In this post, I will show you how to show a card overlay when a card is hovered. Hover the card below to see an example.

See the Pen
card overlay by Steven Stromick (@sstromick)
on CodePen.

First let’s start with the HTML.

<div class="card">
  <img src="https://images.unsplash.com/photo-1517021897933-0e0319cfbc28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="card__image">
  <div class="card__overlay">
    <div class="overlay__text">
      <h3>Mountain Trips</h3>
      <p>Plan your next adventure</p>
      <a href="#" class="button">View Trips</a>
    </div>
  </div>
</div>

Now for the CSS for the plain (non-hovered) card.

.card {
   position: relative;
   transition: all .5s ease-in;
}

.card__image {
   display: block;
   width: 100%;
   height: auto;
}

Now for the css to format what is visible on the card when hovered. We set the opacity of this area to zero so that it is not visible in the normal state.

.card__overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: none;
  transition: .5s ease;
  background-color: #393839;
}

Finally let’s add the CSS to display the overlay on hover. When the card is hovered, we simply just change the opacity of the card overlay area.

.card:hover .card__overlay {
  opacity: 1;
}

That is it… now we have a card that will show an overlay when hovered.