.slider {
	/* set initial width */
	width: 1200px;
		   
	/* hide the content that overflows (to allow second box to show through) */
	overflow: hidden;
	display: inline-block;
		   
	/* skew container so that it has angled edge, and set up transition */
	transform: skewX(45deg);
	transition: width 1.2s ease-in-out;
		  
	/* give negative margin to remove gap caused by left hand skew */
	margin-left: -76px;
	border-right: 0px solid ghostwhite;
		   
	/* hide pointer events for unseen content */
	pointer-events: none;
	background: #111;
}
		
/* set the size of the boxes and any decoration */
.box { 
	width: 1200px;
	height: 500px;
}
		
/* make the links the size of the full boxes (not needed for technique) */
.box a { 
	display: block; 
	width: 100%; 
	height: 100%;
}
		
.sunset {
	/* skew back by negative of parent's skew so contents is upright */
	transform: skewX(-45deg);
		  
	background: url(http://dejan-markovic.com/DM-test/img/white.png) no-repeat;
	margin-left: 76px; /* give margin to push content away from left slanted edge */
	pointer-events: auto;	/* allow pointer events for the box */
}
		
.sunrise {
	background:  url(http://dejan-markovic.com/DM-test/img/black.png) no-repeat;
	position: absolute; 	/* remove from flow so sunset is placed on top */
}
		
/* make first box bigger on hover, and smaller when hover second box */
.slider:hover {
	width: 1024px;
}
		
.sunrise:hover + .slider { 
	 width: 250px;
}