Card swipe/flip effect using CSS [closed]

Question

I'm trying to figure out how the card swipe/flip effect was done as seen on this site: http://catalystconference.com/ (under the "Our Favorites" and similar sections). Can this be accomplished using only CSS?

Answer 1

Don't rely on text-indent, because it forces the browser to actually render the negative space that you have specified. Instead, try using absolute positioning and left/top/bottom/right properties to help position (and subsequently reveal/hide) your hidden pane.

For your HTML, I have taken the liberty to create two panes in your <div>: a visible and a hidden one.

<div>
    <p class="pane-visible">Visible pane.</p>
    <p class="pane-hidden">Hidden pane.</p>
</div>

CSS wise, the visible pane is positioned as is, but the hidden pane is positioned absolutely (but relative to its parent) that is 100% off from the top (therefore sits at the bottom of the parent container, but out of sight). The trick is to change the top property of the hidden pane when the parent is hovered, to bring it to the top. The animation is easily done with the CSS3 property: transition.

div {
    overflow: hidden;
    position: relative;
    width: 300px;
    height: 300px;
}
div > p[class|="pane"] {    /* Targets element with the class "pane-" (notice the dash) */
    box-sizing: border-box;    /* Forces width and height to be at 300px even with padding */
    padding: 1em;
    width: 300px;
    height: 300px;
}
    div > p[class*="hidden"] {
        position: absolute;
        top: 100%;
        left: 0;
        transition: all .25s ease-in-out; /* You might want to add vendor prefixes */
    }
        div:hover > p[class*="hidden"] {
            top: 0;
        }

Here is my proof-of-concept fiddle: http://jsfiddle.net/teddyrised/TTv4q/2/