Design Challenge #2

Responsive text caption with zoom hover on background image

by will525

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-9 col-sm-9">
        <div class="grid">
            <figure class="effect-chico">
                <img src="http://stylistpick.preview.remarkable.net/img/static/homepage/blocks/sp1.jpg" alt="img15"/>
                <figcaption>
                    <div class="ditto">
                        <h2>Brand</h2>
                        <span class="italic"><i>Of the week</i></span>
                    </div>
                    <div class="ditto">
                        <p>from stunning maxis to perfect playsuits, update<br />your summer style with this fun and flirty brand</p>
                    </div>
                    <div class="ditto">
                        <p><a href="#">Shop the edit</a></p>
                    </div>
                </figcaption>			
            </figure>
        </div>
    </div>
</div>

CSS

figure.effect-chico img {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-chico:hover img {
	opacity: 0.9;
	-webkit-transform: scale(1.06);
	transform: scale(1.06);
}
figure.effect-chico figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
figure.effect-chico .ditto {
    background:#fff;
    display: inline-block;
    padding:10px;
    font-family: "Times New Roman", Times, serif;
    h2{
        font-family: "Times New Roman", Times, serif;
        font-size: 60px;
        margin:0;
        text-transform: uppercase;        
    }
    .italic{
        font-family: "Times New Roman", Times, serif;
        font-size: 36px;
    }
    p{
        font-family:Arial;
        font-size: 14px;
    }
    a{
        color:#000;
        font-weight:bold;
        text-transform:uppercase;
    }
}

/* Common style */
.grid {
    figure {
        position: relative;
        z-index: 1;
        display: inline-block;
        overflow: hidden;
        margin: -0.135em;
        width: 100%;
        background: #000;
        cursor: pointer;
        img {
            position: relative;
            display: block;
            height: auto;
            opacity: 1;
            width:100%;
        }
        figcaption {
            padding: 2em;
            color: #000;	
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
}

JavaScript

/*

    While we are waiting for JSFiddle to support LESS integration I figured
    I would get a work around sorted so I can still write it in here
    
    Twitter: @aaronlayton
*/

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');

// Step 2: Tell LESS to refresh the styles
less.refreshStyles();

/* 
    You could put this as a oneliner and use it as a shim for JSFiddle

    (function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()
    
*/