Linq Tiles

An alternative to having the tiles flip. Maybe they could use this motion instead. Less distracting

by kshep92

HTML

<div class="tile">
    <div class=picture>
        <img src="http://4.bp.blogspot.com/--XedUCNbLIE/TtJsRrrfR7I/AAAAAAAAB-E/ccVkhkHGEOI/s320/adidas-cool-logo-1920x1080-wallpaper-7367.jpg" />
    </div>
    <div class="info">
<span class=title>Adidas Brand</span>        
    </div>
</div>

<div class="tile">
    <div class=picture>
<img src=http://cogahusky.files.wordpress.com/2012/05/swiss_air_logo1.png />    
    </div>
    <div class="info">
        <span class=title>Swissair Shoes</span>
    </div>
</div>

CSS

div.tile {
    overflow: hidden;
    width: 320px;
    height: 180px;
    margin-bottom: 5px;
    cursor: pointer;
}

div.picture {
z-index: 0;
position: relative;
    top: 0;
}

div.info {
    position: relative;
    /* ff won't transition default values. They have to be declared before they can be transitioned */
    top: 180px;
    -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    -transition: top 0.5s ease;
    z-index: 1;
    height: 180px;
background: rgba(0, 0, 0, 0.5);
    color: #444;
    font-weight: bold;
    font-family: sans-serif;
     -webkit-box-sizing: border-box;
    padding: 5px;
    color: #fff;
}

div.tile:hover .info {
    top: -182px;
    /* the third parameter indicates the transition delay */
    -webkit-transition: top 0.2s ease 0.3s;
    /* in this case, the animation delays for 0.2s before it transitions
    to the hover state */
    -moz-transition: top 0.2s ease 0.3s;
    -o-transition: top 0.2s ease 0.3s;  
    -transition: top 0.2s ease 0.3s;
}

span.title {
    text-transform: uppercase;
}