Responsive image gallery example

Note the folders are denoted with an illusion of multiple images. When the width of the screen is expanded or contracted the design alters.

by lovromar

HTML

<div class="pictures">
    <div class="pic">
        <b><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/SmithTower_Seattle_WA_USA.jpg/800px-SmithTower_Seattle_WA_USA.jpg">
        </b><h3>Slinging Beer</h3>
        <p>Six Arms, Pine St, Seattle</p>
    </div>
    <div class="pic pics">
        <b><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/US_Navy_050803-N-0975R-007_The_guided_missile_frigate_USS_Crommelin_%28FFG_37%29%2C_rounds_the_bend_as_part_of_the_55th_Annual_Seafair_Parade_of_Ships.jpg/800px-US_Navy_050803-N-0975R-007_The_guided_missile_frigate_USS_Crommelin_%28FFG_37%29%2C_rounds_the_bend_as_part_of_the_55th_Annual_Seafair_Parade_of_Ships.jpg">
        </b><h3>Us after a night out</h3>
        <p>IHOP, Madison St, Seattle</p>
    </div>
    <div class="pic">
        <b><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Smith_Tower_mailbox_01.jpg/800px-Smith_Tower_mailbox_01.jpg">
        </b><h3>My Cat is Meeowing! What can I do? Do you all have any suggestions?</h3>
        <p>Joule Apts, Broadway, Seattle</p>
    </div>
    <div class="pic">
        <b><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Seattle_-_First_A.M.E._Church_02.jpg/800px-Seattle_-_First_A.M.E._Church_02.jpg">
        </b><h3>Goodnight Seattle!</h3>
        <p>Joule Apts, Broadway, Seattle</p>
    </div>    
</div>

CSS

body { font: 100% sans-serif; background: #F0F8FF; }

.pic {  
    margin: 0 1% 1em 1%;     
}

.pic img {
    max-width: 100px;    
    max-height: 100px;
    padding: 5px;
    background: #fff;
    box-shadow: 0 0 0.25em #666;
}

.pic :last-child {
    font-size: 0.6em;
    text-transform: uppercase;
    font-weight: 100;
    color: #666;
}

.pics b {
    position: relative;
    display: inline-block;
}

.pics b img { z-index: 1; position: relative; }

.pics b:before {
     content: "";
     display: block;
     position: absolute;
     z-index: 0;
     width: 100%;
     height: 90%;
     background: #fff;
     box-shadow: 0 0 5px #999;
    -webkit-transform: rotate(4deg); 
    -o-transform: rotate(4deg);     
    -moz-transform: rotate(4deg);     
    -ms-transform: rotate(4deg);     
    transform: rotate(4deg);     
}

.pic h3 { margin-top: 0.5em; }

@media only screen and (max-width: 800px) {
   .pic {
        overflow: hidden;
        padding: 1em 1em 1em 148px;
        margin: 0;
        border-bottom: 1px solid #ccc; 
        background-image: -webkit-linear-gradient(hsla(208, 100%,87%, 0), hsl(208, 100%,94%));
        background-image: -o-linear-gradient(hsla(208, 100%,87%, 0), hsl(208, 100%,94%));
        background-image: -moz-linear-gradient(hsla(208, 100%,87%, 0), hsl(208, 100%,94%));
        background-image: -ms-linear-gradient(hsla(208, 100%,87%, 0), hsl(208, 100%,94%));
        background-image: linear-gradient(hsla(208, 100%,87%, 0), hsl(208, 100%,94%));

    min-height: 120px;
        position: relative;
    }

    .pic b {
        width: 110px;
        text-align: center;
        display: block;
        position: absolute;
        left: 16px;
        top: 16px;
    }

    .pic :last-child {
         margin-bottom: 1em;
    }
}

@media only screen and (min-width: 800px) {
    .pic { 
        width: 30%;
        display: inline-block;
        height: 30%;
        vertical-align: top;
    }

    .pic img {
        max-width: 100%;
       ...