<style type="text/css">

.moodb { width: 320px; margin: auto; background-color: #fff; padding: 20px; margin: auto; height: 320px; position: relative; overflow: hidden;}

.moodb .moodboard { position: absolute; top: 0px; left: 0px; width: 360px; height: 360px; background-color: rgba(253, 152, 218, 0.8); transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; }

.moodb:hover .moodboard { left: 360px; }

.moodboard .moodbt { position: absolute; bottom: 20px; left: 20px; font-size: 40px; color: #fff; text-transform: lowercase; line-height: 100%; font-family: 'Abril Fatface', cursive; letter-spacing: -1px; }

.bcredit, .bcredit a { text-align: center; font-size: 7px; color: #777; font-family: calibri, sans-serif; line-height: 100%; text-transform: uppercase; margin-top: 10px;}

.moodb img { width: 100px; }

</style>

<link href='http://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'>

 

<div class="moodb"><table cellpadding="0" cellspacing="0"><tr><td><img src="http://placehold.it/160"/></td><td style="width: 10px;"></td><td><img src="http://placehold.it/100"/></td><td style="width: 10px;"></td><td><img src="http://placehold.it/100"/></td></tr><tr style="height: 10px;"></tr><tr><td><img src="http://placehold.it/100"/></td><td style="width: 10px;"></td><td><img src="http://placehold.it/100"/></td><td style="width: 10px;"></td><td><img src="http://placehold.it/100"/></td></tr><tr style="height: 10px;"></tr><tr><td><img src="http://placehold.it/100"/></td><td style="width: 10px;"></td><td><img src="http://placehold.it/100"/></td><td style="width: 10px;"></td><td><img src="http://placehold.it/100"/></td></tr></table><div class="moodboard"><div class="moodbt"> 

 

first last

 

</div></div>