Question

I’ve run in to a bit of a problem. I have a menu list where I custom made some image hover states for list items. This worked perfectly fine until I needed to change the menu items (list item text length, etc). I have to go back and re-make all of the images each time something changes.

Here are some images of what I’m trying to accomplish:

Basically the hover adds a red background and a duplicate of that red region rotated ~2 degrees and is lighter colored. Would it be possible to do this via CSS with :after and transform: rotate()? If not, what would be a nice way of accomplishing this effect for varying word lengths?

Thanks ahead of time!

Tre

Answer 1

This can easily be done with transform as you say. You’ll need to have two elements in each button though, one for the text and one for the skewed background:

<div class="menu-button">
    <div class="text">Screenings</div>
    <div class="hover-bg"></div>
</div>

And style the .hover-bg class something like this:

#menu .menu-button:hover .hover-bg
{
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(220, 50, 50, 0.4);
    transform: rotate(2deg) scale(1.05, 1);
    transform-origin: center right;
}​

Here’s an example on JSFiddle

Here’s an example where I had some fun with transitions. Due to lazyness I only bothered to make it work in Webkit, meaning Chrome and Webkit.

Note that for cross-browser compatibility you’ll need the vendor specific property prefixes (-webkit-, -moz-, etc)