Responsive Image Mask Test

HTML

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" class="responsive" />
<br/><br/>


<div class="mask-outer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" />    
</div>

CSS

.responsive {
    max-width: 100%;
    height: auto;
}

.mask-outer
{
    width: 50%;   
    height: 200px;
    overflow: hidden;
    position:relative;
}

.mask-outer img
{
   position:absolute;
   left: -50%;
}