Spinning Thumbnails

by Taufik Nurrohman

HTML

<div class="box-wrap">
    <img alt="th" src="http://lorempixel.com/150/150/food/1">
    <p><span>Ciluk baaa!!!</span></p>
</div>

<div class="box-wrap">
    <img alt="th" src="http://lorempixel.com/150/150/food/2">
    <p><span>Bakikuk!!!</span></p>
</div>

<div class="box-wrap">
    <img alt="th" src="http://lorempixel.com/150/150/food/3">
    <p><span>Adadadadzaa!!!</span></p>
</div>

CSS

* {margin:0;padding:0}

body {
    padding:40px;
    background-color:gold;
}

.box-wrap {
    width:150px;
    height:150px;
    position:relative;
    margin:0 0 10px;
    font:normal bold 13px Arial,Sans-Serif;
    background-color:black;
    color:white;
    -webkit-transition:width .5s ease-in-out 1s;
    -moz-transition:width .5s ease-in-out 1s;
    -ms-transition:width .5s ease-in-out 1s;
    -o-transition:width .5s ease-in-out 1s;
    transition:width .5s ease-in-out 1s;
}

.box-wrap img {
    width:150px;
    height:150px;
    display:block;
    position:absolute;
    top:0;
    left:0;
    -webkit-transform:rotate(720deg);
    -moz-transform:rotate(720deg);
    -ms-transform:rotate(720deg);
    -o-transform:rotate(720deg);
    transform:rotate(720deg);
    -webkit-transition:all 1s ease-out;
    -moz-transition:all 1s ease-out;
    -ms-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition:all 1s ease-out;
}

.box-wrap:hover {width:400px}

.box-wrap:hover img {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    z-index:99;
}

.box-wrap p {
    margin:0 0 0 150px;
    overflow:hidden;
}
.box-wrap p span {
    display:block;
    width:200px;
    padding:15px 15px;
}