Make two pictures overlap using CSS

<style type="text/css">

.container {
width: 550px;
height: 250px;
margin: 50px;
overflow:hidden;
position: relative;
border: 2px solid #666;
}

.img1 {
border-right: 2px solid #666;
position: absolute;
width: 325px;
height: 600px;
overflow: hidden;
left: -75px;
top: -230px;
z-index: 2;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}

.img1 img {
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}

.img2 {
position: absolute;
width: 450px;
left: 150px;
z-index: 1;
overflow: hidden;
}

</style>

<div class="container">
    <div class="img1"><img src="dubai evening rush.png" /></div>
    <div class="img2"><img src="dubai.jpg" /></div>
</div>


Output :)