Skip to content

Instantly share code, notes, and snippets.

@NatalieMac
Created March 18, 2014 02:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save NatalieMac/9612508 to your computer and use it in GitHub Desktop.
Save NatalieMac/9612508 to your computer and use it in GitHub Desktop.
.photo-grid {
margin: 1em auto;
max-width: 1106px;
text-align: center;
}
.photo-grid li {
border: 5px solid white;
display: inline-block;
margin: 1em;
width: 289px;
}
.photo-grid img {
display: block;
height: auto;
max-width: 100%;
}
.photo-grid figure {
height: 163px;
overflow: hidden;
position: relative;
width: 289px;
}
.photo-grid figcaption {
background: rgba(0,0,0,0.8);
color: white;
display: table;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 100;
}
.photo-grid figcaption p {
display: table-cell;
font-size: 1.5em;
position: relative;
top: -40px;
width: 289px;
vertical-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment