Hover to Expose

Simple CSS animation (cross-browser) that exposes a portion of

by Pete Fecteau

HTML

<h1>Guess the City</h1>
<p>Hover over images with your mouse to see their names</p>
<div class="container">
    <div class="buffer">
        <div class="content">
            <img src="http://buttonpresser.com/img/ggb.png"/>
            <h2 class="caption">San Francisco, California</h2>
        </div>
    </div>
</div>
<div class="container">
    <div class="buffer">
        <div class="content">
            <img src="http://buttonpresser.com/img/nola.png"/>
            <h2 class="caption">New Orleans, Louisiana</h2>
        </div>
    </div>
</div>
<div class="container">
    <div class="buffer">
        <div class="content">
            <img src="http://buttonpresser.com/img/nyc.png"/>
            <h2 class="caption">New York, New York</h2>
        </div>
    </div>
</div>
<div class="container">
    <div class="buffer">
        <div class="content">
            <img src="http://buttonpresser.com/img/det.png"/>
            <h2 class="caption">Detroit, Michigan</h2>
        </div>
    </div>
</div>

CSS

body {
    padding:20px;
    font-family:helvetica, arial, san-serif;
    background:url('http://buttonpresser.com/img/wall4_lg.png') repeat;
}
h1 {margin:0 0 10px;}
p {margin:0 0 60px;}
.container {
    float:left;
    margin: 0 20px 60px 0;
    height:200px;
    width:200px;
    overflow:visible;
    border:10px solid #000;
}
.container .buffer {
    position:relative;
    top:0px;
    width:200px;
    height:200px;
    overflow:hidden;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.container .buffer:hover {
    top:-60px;
    width:200px;
    height:260px;
}
.container .buffer .content {
    width:200px;
    height:260px;
}
.container .buffer .content .caption {
    position:relative;
    top:-58px;
    padding:20px 10px;
    margin:0;
    height:60px;
    background-color:rgba(0,0,0,0.6);
    color:#FFF;
    font-size:14px;
    font-weight:bold;
}