3x3 fpoimg

by hellosze

HTML

<div class="container">
<div class="box">1</div>
<div class="box">1</div>
<div class="box clearfix">1</div>

<div class="box">1</div>
    <div class="box focused"><div class="huge">1</div></div>
<div class="box clearfix">1</div>


<div class="box">1</div>
<div class="box">1</div>
<div class="box clearfix">1</div>

</div>

CSS

.container { background: url("http://fpoimg.com/300x300"); width: 300px; height: 300px; }
.box { float: left; width: 100px; height: 100px; }
.clearfix { clear: right; }
.focused { background: #000; width: 100px; height:100px; overflow: hidden; color: #fff;}
.huge2 { width: 1000px; overflow: hidden }