Here is the page this post concerns. When you scroll over the images, I would like the title and the description to be centered after it scrolls up. This would be easy if the title and description were each one line of text…but some of them are two lines of text.
I was checking out @chriscoyier and his vertically center multi-lined text article, here, but I can’t seem to figure out how to merge the two.
Here is the CSS I’m using for the gallery:
.gallery {
width: 970px;
height: 100%;
margin: 0 -10px 0 0;
}
.image-container {
width: 184px;
height: 184px;
overflow: hidden;
background-color: #D7D7D7;
margin: 0 10px 10px 0;
float: left;
color: #464646;
position: relative;
-o-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.image-container a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-bottom: none;
}
.image {
/*height: 194px;*/
margin-top: -12px;
padding: 0 0 10px 0;
transition: margin-top .3s ease-in-out .3s;
}
.image h4 {
margin-top: -6px;
padding: 0 10px;
text-align: center;
}
.image p {
margin-top: 0;
padding: 0 10px;
text-align: center;
}
.image-container:hover .image {
margin-top: -196px;
}
And here is an example of the HTML:
<div class="gallery">
<div class="image-container">
<a href="http://www.mintertweed.com/wp-content/uploads/2013/08/001.png" alt="Poe Little and the Black Rabbit"></a>
<div class="image">
<img src="//www.mintertweed.com/wp-content/uploads/2013/08/001-e1377106485516-164x164.png" alt="Poe Little and the Black Rabbit" width="184" height="184" class="alignnone size-thumbnail wp-image-487" />
<h4>Poe Little and the Black Rabbit</h4>
<p>Adobe Photoshop</p>
</div> <!-- end image-details -->
</div> <!-- end image-container -->
</div> <!-- end gallery -->
Any help would be greatly appreciated. Thanks!
