front/back DIV transition mousover as in USAToday

Question

I have been asked to implement a div mouseover transition as it is in USAToday (at time of writing).

Basically the web site has some boxes with this structure:

<div class="asset">
   <div class="front">'image and some text'</di>
   <div class="back">'some other text'</div>
</div>

At page loading only the 'front' divs are shown. By hovering on any 'asset' the 'back' div fade in covering 'front' div, on mouse out 'back' div fade out, showing the front box again.

I am not a web designer, altough I know enough about web and javascript. I did analyze the source code (with firebug), but I couldn't manage to fully understand how this transition is achieved.

One of the solution I found is by using JQuery fadeIn/fadeOut but I am having problem: the behavior is correctly replicated, but back div appears below front div and not over it.

Can you suggest a way to replicate the exact usatoday behavior ?

Answer 1

The key is to have a block element with position: relative and then inside elements with position: absolute:

http://jsfiddle.net/coma/FeVsr/12/

HTML

<div class="news">
    <a href="#" class="boxing" style="background-image:url(https://si0.twimg.com/profile_images/3162594037/e232a8ce35fe8ce856e4a52a16141f20.jpeg);">
        <div class="summary">...</div>
        <div class="content">...</div>
    </a>
    <a href="#" style="background-image:url(https://si0.twimg.com/profile_images/3162594037/e232a8ce35fe8ce856e4a52a16141f20.jpeg);">
        <div class="summary">...</div>
        <div class="content">...</div>
    </a>
</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}

div.news {
    padding: 10px;
    background: #eee;
}

div.news:after {
    content: "";
    display: block;
    clear: both;
}

div.news > a {
    display: block;
    float: left;
    width: 200px;
    border: 5px solid #fff;
    margin: 0 8px 8px 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
    position: relative;
    background: #009BFF none no-repeat top;
    background-size: cover;
    font-size: 12px;
    text-decoration: none;
    color: #fff;
}

div.news > a > div.summary {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    padding: 5px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .7);
    line-height: 1.4em;
}

div.news > a > div.content {
    min-height: 200px;
    position: relative;
    opacity: 0;
    background-color: inherit;
    transition: opacity .5s;
    padding: 25px 5px 5px 5px;
    z-index: 1;
    font-size: 13px;
    line-height: 1.4em;
}

div.news > a:hover > div.content {
    opacity: 1;
}

div.news > a:before {
    content: "news";
    display: block;
    padding: 3px;
    background-color: inherit;
    position: absolute;
    top: 0;
    left: 0;
    text-transform: uppercase;
    z-index: 2;
}

div.news > a.people {
    background-color: #9600B4;
}

div.news > a.boxing {
    background-color: #EB1E00;
}

div.news > a.business {
    background-color: #00A53C;
}

div.news > a.people:before {
    content: "people";
}

div.news > a.boxing:before {
    content: "boxing";
}

div.news > a.business:before {
    content: "business";
}