Responsive Gallery with Description

by Rafael Nepomuceno

HTML

<div class="container">
    <div class="base">
        <div class="image-box">
            <div class="image">
                <img src="http://placehold.it/250x100&amp;text=Image%201">
            </div>
             <h3>Description 1</h3>

        </div>
        <div class="image-box">
            <div class="image">
                <img src="http://placehold.it/250x100&amp;text=Image%202">
            </div>
             <h3>Description 2</h3>

        </div>
        <div class="image-box">
            <div class="image">
                <img src="http://placehold.it/250x100&amp;text=Image%203">
            </div>
             <h3>Description 3</h3>

        </div>
        <div class="image-box">
            <div class="image">
                <img src="http://placehold.it/250x100&amp;text=Image%204">
            </div>
             <h3>Description 4</h3>

        </div>
        <div class="image-box">
            <div class="image">
                <img src="http://placehold.it/250x100&amp;text=Image%205">
            </div>
             <h3>Description 5</h3>

        </div>
        <div class="image-box">
            <div class="image">
                <img src="http://placehold.it/250x100&amp;text=Image%206">
            </div>
             <h3>Description 6 with big description line...</h3>

        </div>
        <div class="image-box">
            <div class="image">
                <img src="http://placehold.it/250x100&amp;text=Image%207">
            </div>
             <h3>Description 7</h3>

        </div>
        <div class="image-box">
            <div class="image">
                <img src="http://placehold.it/250x100&amp;text=Image%208">
            </div>
             <h3>Description 8</h3>

        </div>
        <div class="image-box">
            <div class="image">
                <img src="http://placehold.it/250x100&amp;text=Image%209">
            </div>
             <h3>Description 9</h3>

        </div>
        <div...

CSS

.container {
    max-width: 100%;
    word-wrap: break-word;
}
.base {
    position: relative;
    font-size: 0; /*fix display:inline-block margin*/
    resize: both;
    overflow: auto;
    padding: 5px 5px 25px 5px;
    border: 2px solid red;
    background: url('https://cdn4.iconfinder.com/data/icons/fugue/icon/arrow-resize-135.png') no-repeat right bottom;
}
img {
    max-width:100%;
}
.image-box {
    display:inline-block;
    width:25%; /* divided by 100 equals 4 columns */
    box-shadow: inset 0 0 0 1px #65A350;
    vertical-align: top; /* This is important for big descriptions */
}
.image {
    margin: 5px; /* margins-paddings etc on this class */
}
h3 {
    text-align: center;
    font-size: 12px;
}
span {
    position: absolute;
    right: 20px;
    bottom: 1px;
    font-size: 14px;
    color: #FFF;
    background-color: #900;
}