Pamphlet for Chips

skewing on hover

by paullferguson

HTML

<h2 class="bg-title">Sides for Chips?</h2>
<aside>
    <h2>Sides for Chips!</h2>
    <ul>
        <li>
            <h4>Ketchup</h4>
            <p>Is a sweet-and-sour condiment typically made from tomatoes, vinegar, sugar.</p>
        </li>
        <li>
            <h4>Mayonnaise</h4>
            <p>Often abbreviated as mayo, is a sauce. It is a stable emulsion of oil, egg yolk and either vinegar or lemon juice.</p>
        </li>
        <li>
            <h4>Tobasco</h4>
            <p>Is located in Southeastern Mexico, in the northern half of the Isthmus of Tehuantepec.</p>
        </li>
    </ul>
</aside>
<article>
    <h2>Ymm, Chips</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
</article>

CSS

h2, p, li {padding: 10px;} 
h2 {font-size:18px;}
p {font-size: 13px;}
* { -webkit-transition: all 500ms cubic-bezier(0.845, 0.080, 0.155, 0.920);}

article {
    width: 70%;
    background: #afa;
    float: left;
}

aside {
    width: 30%;
    margin-top: 5.5%;
    float: left;
    background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#cfc), to(#afa));
    -webkit-transform: skewy(-20deg);
}

aside h2 {
    margin-top: -38px;
    opacity: 0;
}

aside p {
    line-height: 0;
    padding: 0;
    opacity: 0;
}

aside:hover ~ article  {
    width: 50%;
}

aside:hover {
    width: 50%;
    margin-top: 0px;
    background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#afa), to(#afa));
    -webkit-transform: skewy(0deg);
}

aside:hover h2 {
    opacity: 1;
    margin-top: 0;
}

aside:hover p {
    line-height: 20px;
    opacity: 1;
}

.bg-title {
    position: absolute;
    color: #aaa;
}