Some Responsive Designs

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 erick

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%;
       ...