Little Hover Element Tweaks

This is a pattern I’ve done on a couple sites recently that I want to put somewhere handy.

Bootstrap stretched-link

Often you want a whole div and its components to be clickable as a link. Trying to wrap the whole thing up as a link often doesn’t work well. Making lots of links is messy. Luckily, Bootstrap has handy stretched-link class to deal with it easily. In the example below, the whole card becomes a clickable item by adding stretched-link to the link and position-relative to the place where we want the link contained.

   <div class="col-md-3">
        <div class="card position-relative">
           <?php echo resource_image();?>
          <div class="card-body">
            <a href="<?php the_permalink(); ?>" class="stretched-link"><?php the_title(); ?></a>        
          </div>
        </div>
    </div>

Hover effect

Now that we’ve got a simple way to make the entire item into a link, this bit of CSS makes for a really nice hover effect.

#examples .card:hover {
  transform: scale(1.02);
  box-shadow: 6px 6px $aqua;
}

And what it ends up looking like (roughly) together in codepen.

See the Pen
stretched link hover combo by Tom (@twwoodward)
on CodePen.