JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/jquery/jquery-color/master/jquery.color.js"></script>
Some text
<div style="height: 180px">
    <div class="block large">
        <span class="date">21.03.2011</span>
        <div class="img" style="background-image: url('http://www.deviantart.com/download/31170170/Desu_by_Saibanchou.png')"></div>
    </div>
    
    <div class="block small">
        <span class="date">20.12.2098</span>
        <div class="img" style="background-image: url('http://www.foroswebgratis.com/fotos/5/5/4/8/4//811722foreverjp7.jpg')"></div>
    </div>
    
    <div class="block small">
        <span class="date">23.02.2000</span>
        <div class="img" style="background-image: url('http://attimg.dospy.com/img/day_090811/20090811_f5070578402e232a11501Rv0116nn7hs.jpg')"></div>
    </div>
</div>
Some text

CSS

.block {
    width: 15%; 
    float: left;
    margin: 1px;   
}

.block.large {
    width: 69%;
}

.block.small {
    opacity: 0.25;
}

.date {

}

.img {
    background: #fff url('http://vectorsib.i-dl.ru/img/photo_group_bg.jpg') no-repeat top left;
    height: 150px;
    border: 1px #bbb solid; 
}

body {
    background: #abcdef;
}

JavaScript

$("body").animate({
      //backgroundColor: $.Color({ saturation: 1 })
        backgroundColor: "#fff"
  }, 1000 );

$(".block").live('mouseover', function() {
    var speed = 200;
    $(".block").stop(true, true);
    if (!$(this).hasClass('large')) {
        $('.block.large').animate({width:"-=55%", opacity:"0.25"}, speed).removeClass('large');
        $(this).animate({width:"+=55%", opacity:"1"}, speed).addClass('large');
    }    
});