After creating a display that matched my boss's request for a "flat tile" look using only CSS, he suddenly changed his mind and now wants the text to slide out while keeping the image in place. You can see my progress here.
I initially tried floating the description div and making it relative to the bottom of the container div, hoping that when the container expanded, the text would slide down. Unfortunately, this approach didn't work as expected.
Here is a snippet of the CSS code:
/* PRE-HOVER ROSTER APPEARANCE */
div.dude {
background-color: #82b2cd;
float: left;
margin-left: 50px;
margin-bottom: 20px;
width: 200px;
height: 200px;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
div.dude > :first-child { /* DESCRIPTION */
font-size: 14px;
opacity: 0;
text-align: center;
height: 200px;
color: #ffffff;
transition: opacity 1s linear;
}
... (more CSS code)
And here is a snippet of the HTML code:
<div class="bs-docs-grid">
<div class="row">
<div class="dude span4">
<div><h5>Scott Sheridan</h5></br><i>English as a Second Language</i></br>Marianapolis Preparatory School</br>Thompson, CT</div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/ssheridan.jpg');"></div>
</div>
... (more HTML code)
</div>
</div>