Trying to display info on :hover with CSS, keyframes - html

Question

I build a display that reveals information in the requested "flat tile" look my boss asked for using just CSS. So he has changed his mind and wants the text to slide out and the picture to say where it is. Here's where I'm at now.
I thought I might float the description div and make it relative to the bottom of the container div. That way when the container expands, the text would travel down. Didn't work.
CSS
/*HOW THE ROSTER LOOKS BEFORE THE HOVER*/
div.dude{ /*DUDE is the container for both the description and the photo divs*/
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;
}
div.dude>:first-child>h5{
color:#ffffff;
font-family: 'Roboto', sans-serif;
font-size:16px;
}
div.dude > div:nth-of-type(2){ /*Roster photo 200x200*/
position:relative;
top:-200px; /*cover up the description*/
float:left;
clear:none;
height:200px;
width:100%;
background-size:cover;
}
/*HOW A ROSTER ITEM LOOKS WHEN THE MOUSE HOVERS or FOCUS:*/
div.dude:hover, div.dude:focus{
height:400px;
box-shadow: 2px 2px 1px #888888;
}
div.dude:hover > :first-child, div.dude:focus > :first-child {
opacity: 1;
transition: opacity 1s linear;
}
div.dude:hover > div:nth-of-type(2), div.dude:focus > div:nth-of-type(2){
animation:duder 1s;
-moz-animation:duder 1s; /* Firefox */
-webkit-animation:duder 1s; /* Safari and Chrome */
top:0px;
}
#keyframes duder
{
0% {top:-150px;}
25% {top:-0px;}
50% {top:-0px;}
75% {top:-0px;}
100% {top:0px;}
}
#-moz-keyframes duder /* Firefox */
{
0% {top:-150px;}
25% {top:-0px;}
50% {top:-0px;}
75% {top:-0px;}
100% {top:0px;}
}
#-webkit-keyframes duder /* Safari and Chrome */
{
0% {top:-150px;}
25% {top:-0px;}
50% {top:-0px;}
75% {top:-0px;}
100% {top:0px;}
}
HTML
<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>
<div class="dude span4">
<div><h5>Mike Fauteux</h5></br><i>Academic Numeracy and Geometry</br>Master Teacher</i></br></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/08/fauteux-300x300.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Rose Zapata</h5></br><i>Algebra 1 and Geometry</br>Master Teacher</i></div>
<div style="background-image:url('http://leadps.org/images/content/633/Zapata.jpg');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Rudy Sharar</h5></br><i>High School Science</i></div>
<div style="background-image:url('http://www.leadps.org/images/content/1263/Rudy%20Sharar.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Joe Williams</h5></br><i>School Administration</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/joe_williams.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Martha James</h5></br><i>High School</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/12/martha_james.jpg');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Mitchell Mosbey</h5></br><i>First Grade</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/mmosbey.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Robert Rigonan</h5></br><i>Middle School Science</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/397136_4343580901101_1361576410_n-650x650.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Manny Herrera</h5></br><i>Fourth Grade</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/mannyhanging.jpg');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Sophia Thomas</h5></br><i>High School Mathematics</i></div>
<div style="background-image:url('http://www.leadps.org/images/content/1263/Sophia%20Thomas.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Mary Ellen Davies</h5></br><i>Middle School German</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/Schoenes-Wochenende-Ticket.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Dan Alderson</h5></br><i>10th Grade English</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/dalderson-650x650.png');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Heather Meiring</h5></br><i>High School Science</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/heather_meiring.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Ruthe Hall</h5></br><i>Middle School</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/12/ruthe_hall.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Evan Wolkenstein</h5></br><i>Jewish Literature, Psychology, Human Relations</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/12/evan_wolk.png');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Sarah Gerhardt</h5></br><i>Second Grade</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/Sarah_g-650x644.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Becca Abeles</h5></br><i>10th & 11th Grade English</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/b_abeles.jpg');"></div>
</div>
<div class="dude span4">
<div><h5>Tess O'Brien</h5></br><i>Fourth Grade</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/P1010156_2.jpg');"></div>
</div>
</div>
<div class="row">
<div class="dude span4">
<div><h5>Jean Gephart</h5></br><i>High School Science</i></div>
<div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/11/JeanGephart.jpg');"></div>
</div>
</div>
</div>
<!-- ROSTER ENDS -->

Answer 1

In order to make the description text slide over the picture (without pushing the picture down), you can put the description in an absolutely positioned div, position it with top:-200px above the parent element, and the set top:0 when the parent is hovered or focused. I provide a working example here: http://jsfiddle.net/YXuk9/113/.
While you're at it, there are several changes you can make to your code that will make doing what you want easier. First, it's better to structure your HTML using IDs and classes if you can, rather than referring to them using nth-child selectors. It will be easier to read and maintain.
<div class="profile">
<img class="photo" src="http://exitticket.org/wp-content/uploads/2013/10/ssheridan.jpg" alt="Scott Sheridan" />
<div class="description">
<h5>Scott Sheridan</h5>
<span class="subject">English as a Second Language</span>
<span class="school">Marianapolis Preparatory School</span>
<span class="location">Thompson, CT</span>
</div>
</div>
Notice how this way of structuring the HTML makes it clear what kind information each tag holds. This way, when you refer to a given tag in your CSS, it's clear what you're talking about, so you don't need a comment saying that the first child of the div is the description!
Then your CSS can be much simpler:
.profile {
position:relative;
width:200px;
height:200px;
display:block;
overflow:hidden;
float:left;
margin-left:50px;
margin-bottom:20px;
}
.photo {
width:100%;
}
.description {
background-color:#82b2cd;
position:absolute;
top:-200px;
left:0;
color:white;
padding:10%;
height:100%;
transition: all 0.3s ease-in-out;
}
.description span {
display:block;
}
.profile:hover .description, .profile:focus .description {
top:0;
}
Note that now it's clear what element each CSS rule refers to. To make it clear I've removed some of the styles that aren't relevant to the problem you're having.