Expose

by mmarcon

HTML

<div id="expose">
    <section id="s1" class="e-section small">
        <h5>Section 1</h5>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tortor eu nisi imperdiet viverra et ut ante. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras mollis libero quis erat porttitor commodo. Nullam quis arcu in nisi convallis condimentum. Curabitur eget dui velit. Etiam libero diam, vehicula in luctus at, tincidunt tempor nisi.
        </p>
    </section>
    <section id="s2" class="e-section small">
        <h5>Section 2 with a long title</h5>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tortor eu nisi imperdiet viverra et ut ante. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras mollis libero quis erat porttitor commodo. Nullam quis arcu in nisi convallis condimentum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tortor eu nisi imperdiet viverra et ut ante. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras mollis libero quis erat porttitor commodo. Nullam quis arcu in nisi convallis condimentum.
        </p>
    </section>
    <section id="s3" class="e-section small">
        <h5>Section 3</h5>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tortor eu nisi imperdiet viverra et ut ante. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras mollis libero quis erat porttitor commodo. Nullam quis arcu in nisi convallis condimentum. Curabitur eget dui velit. Etiam libero diam, vehicula in luctus at, tincidunt tempor nisi.
        </p>
    </section>
    <section id="s4" class="e-section small">
        <h5>Section 4</h5>
        <p>
            Lorem...

CSS

@import url(http://fonts.googleapis.com/css?family=Metrophobic);
body {
    font-family: 'Metrophobic', arial, sans-serif;
}
#expose {
    margin: 20px auto;
    text-align: center;
}
.e-section {
    display: inline-block;
    border-radius: 2px;
    width: 80px;
    height: 120px;
    margin: 10px 15px;
    cursor: pointer;
    box-shadow: 0 0 20px #ddd;
    -webkit-box-shadow: 0 0 20px #ddd;
    overflow: hidden;
    padding: 4px;
    background-color: #fff;
    font-size: 6px;
    line-height: 1.5;
    position: relative;
}

.e-section h5 {
    font-size: 150%;
    text-align: left;
    margin-bottom: 1em;
}

.e-section p {
    font-size: 100%;
    text-align: left;
}

.e-section.small:hover {
    /*background-color: #222;
    color: #fff;*/
    margin: 0 15px 20px 15px;
    box-shadow: 0 10px 20px #ddd;
}

.close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 20px;
    background-color: #333;
    color: #fff;
    text-align: center;
    line-height: 20px;
    text-transform: uppercase;
    font-size: 10px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px;
}

JavaScript

$('.e-section').click(function() {
    var c = $(this).clone(false).removeClass('small');
    c.hide().appendTo('body');
    c.css({
        'position': 'absolute',
        'top': $(this).offset().top + 'px',
        'left': $(this).offset().left + 'px',
        'margin': 0
    });
    c.show().animate({
        top: '15px',
        left: $(window).width() / 2 - 244 + 'px',
        width: '480px',
        height: '640px',
        fontSize: '14px',
        padding: '10px'
    }, 1000, null, function(){$('<div/>').text('Close').addClass('close').fadeTo(0, 0.3).click(function(){$(this).parent().fadeTo(500, 0, function(){$(this).remove()})}).appendTo($(this));});
});