Colour Blocks

by adamh

HTML

<div class="container">
    <div class="block"><span>Block #1</span></div>
    <div class="block"><span>Block #2</span></div>
    <div class="block"><span>Block #3</span></div>
    <div class="block"><span>Block #4</span></div>
    <div class="block"><span>Block #5</span></div>
</div>

CSS

body {
    padding: 0;
}
div.container {
    width: 100%;
    height: 100px;
    overflow: hidden;
}

div.block {
    float: left;
    width: 20%;
    padding: 20px 10px;
    box-sizing: border-box;
    height: 100px;
    box-shadow: -4px 0 4px rgba(0,0,0,0.4);
    font-family: Arial, sans-serif;
    color: white;
    font-size: 48px;
}

div.block span {
    display: block;
    width: 400px;
    overflow: hidden;
}

div.block:nth-child(1) {
    background: #ecd078;
}

div.block:nth-child(2) {
    background: #D95B43;
}

div.block:nth-child(3) {
    background: #C02942;
}

div.block:nth-child(4) {
    background: #542437;
}

div.block:nth-child(5) {
    background: #53777A;
}

div.block:first-child {
    box-shadow: none;
}

JavaScript

$("div.block").hover(
    function(){
        $(this).stop(true);
        $(this).siblings().stop(true);
        $(this).animate({'width': '40%'});
        $(this).siblings().animate({'width': '15%'});
    },
    function(){
        $(this).stop(true);
        $(this).siblings().stop(true);
        $(this).animate({'width': '20%'});
        $(this).siblings().animate({'width': '20%'});
    }
);