Pop Hovers

POP has these cool hovers in the boxes that make up their homepage. The boxes have a white background by default, and as you hover over them a dark background slides up behind, the text colors change, and the text “pops” up a little. When you hover off, the dark background slides away, the text colors change back, and the text pops down a little. I thought I’d try and replicate it because, you know, eff yeah hovers.

Demo

Check out this Pen!

HTML

Each area is a “box”:

<a href="#" class="box">
  <h2><span>Breaking news -</span> hippos are sorta dangerous</h2>
  <h3>Tonight at nine</h3>
</a>

CSS (backgrounds)

The styling of the default box is trivial. The hovers are the interesting part. POP does the background slide by using an actual element they animate the position of. If we’re OK with this feature only working on browser that support gradients, we can ditch that element and just animate the background-position.

A top-half-white and bottom-half-black background is easy:

background: linear-gradient(
   white, white 50%, black 50%, black
);

Then we make it twice as tall as the element itself:

background-size: 100% 200%;

Like this:

In reality, we’ll make the background a little bit taller than 200%, because right at 200% it was exposing a little bit of background into the element still (in Chrome).

.box {
  background: linear-gradient(
     white, white 50%, #333 50%, #333
  );
  transition: all 0.2s ease;
}
.box:hover {
  background-position: 100% 100%;
}

CSS (colors)

The default text color is black, so no CSS needed at all there. On hover, we adjust the colors. The span changing is just a fun surprise and brings more pop to the party.

.box:hover h2 {
  color: #48ad26;
}
.box:hover h2 span {
  color: white;
}
.box:hover h3 {
  color: #999;
}

CSS (bumping)

The tricky bit here is that the “bump” happens in different directions depending on if it’s a hover-on or hover-off. The fact that the text moves a bit and then back to it’s original position means a transition won’t help us here either, this is animation territory. We’ll make one @keyframes for the up-bump and another for the down bump. Just a bit of padding will help us, because our box-sizing choice keeps the height of each box the same.

@keyframes up-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 1.5em; }
  100% { padding-top: 2em; }
}
@keyframes down-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 2.5em; }
  100% { padding-top: 2em; }
}

By default (triggers on hover-off) the .box will get the down bump and the :hover will get the up bump. This matches the direction of the background sliding in and out.

.box {
  animation: down-bump 0.4s ease;
}
.box:hover {
  animation: up-bump 0.4s ease;
}

Initial bump fix

Adding that animation on the initial state makes it run right away on page load. Could be a neat effect, could be annoying. The POP site doesn’t run them on load. Matt Boldt had the good idea of adding the out-bump when the hover out occurs only (via a class) so it won’t run at first.

Check out this Pen!

On no-hover devices…

They are links and no vital content is hidden, so no big deal.