CSS mask for image grid - html

Question

How to create an image grid with images nicely lined up in same height rows and same width columns, giving we could have pictures of different aspect ratios in responsive design, in CSS?
Let's take this example page with grid, it's self-explanatory:
http://destadesign.com/test/capricorn/test.html
The image in second row sticks out of the grid.
Responsive design rather require from us to use percent(%) values instead of fixed pixel values, and only for width, so that height is calculated automatically, which in this case complicate things.
I'd think of a clipping mask(?) for images to accomplish that (divs of the same size, holding different size images), however I lack the skill for creating such complex CSS. Any specific help would be highly appreciated, but also some general ideas and guidelines would come in handy.
HTML div-imgage boxes has such (rather natural?) structure:
<div id="1" class="figure">
<a href="#" class="link1">
<img src="images/pic_mountain.jpg" alt="TARGI W PARYŻU">
<div class="figcaption">
<h4>test 1</h4>
</div>
</a>
</div><!-- /end .figure -->
CSS with non-essential hover and text-centering effect:
.figure {
position: relative;
float: left;
width: 10%;
margin-right: 1%;
left:20px;
}
.figure a{
display:block;
width:100%;
height:100%;
position:relative;
z-index:2;
}
.figure a img{
width:100%;
display:block;
}
.figcaption {
font-size: 0.8em;
letter-spacing: 0.1em;
text-align: center;
position: absolute;
top: 0;
left:0;
width:100%;
z-index: 2;
height:100%;
background-color:rgba(0,0,0,.4);
transition:all 0.4s ease;
}
.figcaption h4{
position:absolute;
top:50%;
left:50%;
padding:0;
margin:0;
-moz-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
.figure a:hover .figcaption {
opacity:0;
}
Please go ahead and use this CodePen for convenience:
http://codepen.io/anon/pen/GopQPZ

Answer 1

Without using CSS masks, an example:
body {
background-color: black;
text-align: center;
}
.figure {
display: inline-block;
margin: 2vw;
}
a {
border: 2px solid grey;
border-radius: 5px;
display: inline-block;
height: 10vw;
overflow: hidden;
position: relative;
width: 10vw;
}
a img {
height: 150%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div id="figure1" class="figure">
<a href="http://static.comicvine.com/uploads/scale_super/8/82727/1525513-the_moutain____by_vincentfavre.jpg" class="link1" target="_blank">
<img src="http://static.comicvine.com/uploads/scale_super/8/82727/1525513-the_moutain____by_vincentfavre.jpg" alt="TARGI W PARYŻU">
<div class="figcaption">
<h4>test 1</h4>
</div>
</a>
</div>
<div id="figure2" class="figure">
<a href="http://www.britishairways.com/cms/global/assets/images/content/760x350_beach_Pod-3.jpg" class="link2" target="_blank">
<img src="http://www.britishairways.com/cms/global/assets/images/content/760x350_beach_Pod-3.jpg" alt="TARGI W PARYŻU">
<div class="figcaption">
<h4>test 2</h4>
</div>
</a>
</div>
<div id="figure3" class="figure">
<a href="http://www.barnesandnoble.com/blog/barnesy/wp-content/uploads/2013/08/country_western.jpg" class="link3" target="_blank">
<img src="http://www.barnesandnoble.com/blog/barnesy/wp-content/uploads/2013/08/country_western.jpg">
<div class="figcaption">
<h4>test 3</h4>
</div>
</a>
</div>
<div id="figure4" class="figure">
<a href="http://junebugweddings.com/img/photobug/January2013/beautiful-landscape-wedding-portrait-by-julian-kanz.jpg" class="link4" target="_blank">
<img src="http://junebugweddings.com/img/photobug/January2013/beautiful-landscape-wedding-portrait-by-julian-kanz.jpg">
<div class="figcaption">
<h4>test 4</h4>
</div>
</a>
</div>

Answer 2

Here's an extremely nice CSS grid that's completely responsive. It takes images of any size and you can choose the amount of columns and the space between the images. With media queries you can also make it so that the number of columns changes depending on the size of the device.
https://goo.gl/5SFndB
Credit goes to Chris Coyier. I've used that grid a countless amount of times! It's great.
Also, here's a pen from the same post. It's a beauty!
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
}
http://codepen.io/team/css-tricks/pen/pvamyK