Grow your CSS skills. Land your dream job.

Pizza Time Hovers

Published by Chris Coyier

Hover Maester Jenn Lukas sent me a link to PizzaTime.com. We agreed that 1) those are some pretty neat hovers! and 2) it's pretty cool that there is a quality website at all at a domain like PizzaTime.com - in which that she typed in randomly hoping there would be.

They have a set of navigational boxes that look like this:

Then they go through a neat multi-step transitional thing to essentially turn red:

The red square that the icon is in expands left/right to fill the parent box, then up/down afterward. The text and border change colors to remain visible over the expanded red box.

The HTML

We'll use this:

<a href="#0" class="pizza-link">
  <span class="icon maki-embassy"></span>
  <h3>Find a Store</h3>
  <p>We've got a location near you! As far as Bellingham and Lewiston and Yakima and South to Olympia.</p>
</a>

In case you haven't gotten the memo yet, it's cool to wrap whatever you want in an anchor tag now, so it's easy to make this whole box a link. In our case we'll use that anchor to style the actual box.

Just for this demo, I used We Love Icon Fonts and picked some random icons to use. That site has you use spans with pre-determined classes to show the icons. If I were to take this concept to production, in this case, I'd probably use a pseudo element instead because these icons hold no content value. Or if I was using a span system, I'd apply it with a data-icon attribute and aria-hidden. Read more.

The CSS

This is a decent use case for of nesting in Sass. Everything we're working with here is related to this .pizza-time link, so let's just nest under that. Some boring CSS removed...

.pizza-link {
  display: block;
  float: left;
  /* yadda yadda yadda */
  h3 {
    border-bottom: 1px solid #eee;
    /* relative positioning keeps it on top of :before */
    position: relative;
  }
  p {
    /* relative positioning keeps it on top of :before */
    position: relative;
  }
  h3, p {
    /* "ease" and "all" are implied */
    @include transition(0.2s);
  }
  .icon {
    position: absolute;
    color: white;
    /* position in middle on top */
  }
  &:before {
    content: "";
    background: #D62121;
    /* position in middle on top */
    /* BELOW icon and other content */
    /* :before makes this easier than :after */
    position: absolute;
    width: 50px;
    height: 50px;
    top: 20px;
    left: 50%;
    margin-left: -25px;
    @include transition(
      /* FIRST STEP */
      width 0.2s,
      left 0.2s,
      margin-left 0.2s,
      /* SECOND STEP */
      top 0.2s 0.2s,
      height 0.2s 0.2s
    );
  }
  &:hover, &:active {
    h3 {
      color: white;
      border-bottom-color: #E14646;
    }
    p {
      color: white;
    }
    &:before {
      width: 230px;
      left: 0;
      top: 0;
      margin-left: 0;
      /* hacky, but the parent element */
      /* doesn't have explicit height */
      /* so can't use 100% */
      height: 320px;
    }
  }
}

Three notable points:

  1. The "red box" is a pseudo element. In the past I would have used a span or something here, but now we're able to transition pseudo elements, so might as well.
  2. Because the "red box" is an absolutely positioned :before, all we have to do to the other content inside is give it position: relative and it will sit on top of the red box in the natural document stacking order.
  3. We made the transition "multi-step" by comma-separating all the values to be transitioned. The horizontal-related properties go first: width, left, margin-left. Then the vertical-related properties go "second": top, height. By specifying a delay value equal to the duration value of the first step values, they will happen in sequence after the "first step" properties.

Demo

Check out this Pen!

I think we're all aware now that most touch screens don't have hover states. Perhaps users of these devices won't see our little fancy hover. That's OK. They are links. They still work.

Comments

  1. Robert Oliver
    Permalink to comment#

    I’m not seeing the slowed transition on Safari but I do on firefox. I just get the big,red box instantly.
    The pizza time.com site works on both.

    • Safari doesn’t support pseudo element transitions yet. So it’s a semantic trade off. Put a junk span in there an transition that, or use a pseudo element keeping it clean but with less support. Safari is the very last browser to get on board, so I’d go pseudo element.

      I think the actual site just uses jQuery animations.

  2. Cool idea, but it’s a bit aggressive in it’s current presentation. It’s already red, so the action could stand to be slower and smoother so it’s not punching you in the face so much…still, very cool and a good write up!

  3. AwesOme :-)

  4. Nice technique, but the logo of the page is not very nice, especially the grey background. Was this done by intention or has it been forgotten to remove? :-)

    • Kyle Breckenridge
      Permalink to comment#

      I’m gonna hazard a guess that this was a web guy who put together a nice site, but got saddled with an inherited logo designed by a relation of some kind that the owner is very attached to and couldn’t ever think of changing.

    • The logo is the clients, and as I mentioned below will be changed to a white… no worries my friend! :)

  5. Permalink to comment#

    Wow.. I don’t know if there’s a multi-step transition previously. This is really cool. More advance than a sliding solid color that goes only vertically. Anyway, does this Sass version works on all browser? Any plain CSS version available?

    • Go into Codepen, click onCSS header and it will convert to CSS. However, I would highly recommend switching to a preprocessor workflow… either Sass or Less.

    • Permalink to comment#

      Haa.. !! Thanks Armstrongest. Shame on me. I don’t know if clicking the CSS panel title in CodePen can show complied version instantly. Is there any other preprocessor workflow to compile SASS to CSS without installing ruby? I’m kinda not-too-nerdy to install ruby/do gem-ification on my Windows :)

  6. kid
    Permalink to comment#

    The PizzaTime site does not appear to work at all in IE9.

  7. Permalink to comment#

    Love hover effects, easy simple interactiveness. Take a look at the hover effect I made for my portfolio. http://nicovanzyl.com You might just like it.

  8. syedz
    Permalink to comment#

    wow i like it!!!

  9. Dmitry
    Permalink to comment#

    It would look much better if both horizontal and vertical transitions happened together.

  10. Andrew Pham
    Permalink to comment#

    I like it that you push yourself to recreate everything that you find interesting around the web. It shows that you really have passion for this.
    Anyway, just a small thingy: on their site, the text color changes to white only when the red background expands behind it. I put together Art’s addition, as well as mine: Codepen link

  11. Andrew Pham
    Permalink to comment#

    And could you tell me how the heck are they animating the bottom border of the heading? It’s only 1px thick, and I though top/bottom/right/left transitions aren’t working in a subpixel manner.

  12. I like this because you get a lot of bang for a wee bit of bucks, so to speak. I use hover when necessary and I really like to let the user know if something is clickable. As far as mobile interactivity, it’s a link; it will still take the user where they want to go.

  13. My friend April Smith actually did that site for her client Pizza Time in WA state and I host the site for them. I believe the site uses the Silicon Responsive WordPress Theme.

    I had a conversation with her earlier tonight about the bandwidth increase on the site. I came across this site looking at a link on Twitter from WordPress WordCamp which I attended in Seattle over the weekend. Strange.

    • Thank you Dennis for finding this article. The site is using Silicon Responsive via ThemeForest.

      As I scroll through some comments, yes, we are aware of the little things (grey logo, etc) this site revision only launched a few days ago and is still going through revisions and transitions. :)

      Thank you to css-tricks.com for the shout out and feature!

  14. Joanne Masterson
    Permalink to comment#

    What a delightful surprise, that hover effect. It’s a great reminder to make even the simple things fun, special, or otherwise thoughtfully crafted for the user. Thanks for posting this Chris, and for expanding the discussion everybody.

  15. Travis Miller
    Permalink to comment#

    Pretty dope! It’s Even though the stretch and expand transition doesn’t carry over to the other browsers with a little more tweaking it’s still a decent interaction.

  16. Julian
    Permalink to comment#

    Sexy hover effect! But you know what would be really nice? A share button at the end of the article to be able to easily tweet this from my iPad…

  17. Nelson Hereveri
    Permalink to comment#

    You can enhance the effect by adding a delay in the transitions of the h3 and p tags.

    transition-delay: 0.2s;
    

    CodePen Fork

  18. Very nice effect! I love css animations. I’m always one for achieving the most with as little as possible. That being said, I don’t see why the :before element needs a left margin? Adjust the left value percentage accordingly and this can be removed. If the link (a) element did not have a fixed with width, I would see the need for a left margin declaration, assuring the icon always stays centered.

    Nonetheless, cool stuff. Love reading this blog. Keep up the good work Chris!

  19. Being able to picture the box model in my head has been invaluable over the years, but I’m never quite sure with ::before and ::after. I need to experiment with these more.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".