JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="rect1">
        <a href="#"><div></div></a>
    </div>
    <div class="rect2">
        <a href="#"><div></div></a>
    </div>
    <div class="rect3">
        <a href="#"><div></div></a>
    </div>    
    <div class="rect4">
        <a href="#"><div></div></a>
    </div>
</div>

CSS

body{background:#CCC;}
#container{
    margin:auto;
}
.rect1, rect2, rect3, rect4{
    position:relative;
}

.rect1 a, .rect2 a, .rect3 a, .rect4 a{
    display:block;
    width:329px;
    height:204px;
    float: left;
    background:url(http://i48.fastpic.ru/big/2013/0611/1f/699eb8e701da9746d2c61b6efef2ee1f.png) no-repeat;
}

.rect1  a:hover div, .rect2  a:hover div, .rect3  a:hover div,  .rect4  a:hover div{
    display:block;
    width:398px;
    height:398px;
    position:absolute;
    background:url(http://i46.fastpic.ru/big/2013/0611/ca/b2fcd25ba972d661d5f9ba49ac3138ca.png) no-repeat;
    transition-property: width;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}