HTML

<div id="wrapper"><a class="mask" href="/1.jpg"><img src="https://lh6.googleusercontent.com/47gtEVs4uWM20UyNkj4jDZt-oXVSIQGob0eg6NC4znVF=w213-h300-no" alt="" /></a> <a class="mask" href="/2.jpg"><img src="https://lh6.googleusercontent.com/-sy595_f8r3I/VOy2V3DYrsI/AAAAAAABdFA/VoaPdZWF_zc/w211-h300-no/1-211x300.gif" alt="" /></a>
 <div style="clear: both;">&nbsp;</div>
 </div>
 <!-- #/wrapper -->

CSS

body {
 margin:0; 
 padding:0; 
 background:#eee;
 font-family:Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;
 }
 #wrapper {
 width:420px; 
 margin:0 auto; 
 background:#fff; 
 border: 1px dotted #000;
 border-radius: 2em 0.5em; 
 padding:11px; 
 border-top:none;
 }
 #error_message {
 color:red; 
 display:none;
 font-size:.8em;
 }
 #wrapper {
 border: 1px dotted #000;
 border-radius: 2em 0.5em; 
 -moz-border-radius:0 0 5px 5px;
 -webkit-border-radius: 0 0 5px 5px; 
 box-shadow:0 0 5px #ccc;
 -moz-box-shadow:0 0 5px #ccc;
 -webkit-box-shadow:0 0 5px #ccc;
 }
 .mask {
 position:relative;
 height:220px;
 width:170px;
 float:left;
 overflow:hidden;
 margin:15px;
 border-radius: 2em 0.5em; 
 border:5px solid #f6f6f6;
 box-shadow:0 0 1px #000;
 -moz-box-shadow:0 0 1px #000;
 -webkit-box-shadow:0 0 1px #000;
 }
 .mask img {
 height:300px;
 width:400px;
 }
 .mask img {
 position:absolute;
 margin-top:-150px; /* half the height */
 margin-left:-200px; /* half the width */
 top:50%;
 left:50%;
 }
 .mask img {
 -webkit-transform: rotate(15deg);
 -moz-transform:rotate(15deg);
 -o-transform:rotate(15deg);
 -ms-transform:rotate(15deg);
 transform:rotate(15deg);
 }
 .mask:hover {border-color:#ddd;}