<img src="http://csssecrets.io/images/adamcatlace.jpg" />
<img src="http://csssecrets.io/images/adam-sleeping.jpg" />

/**
 * Diamond images — via clip-path
 */

img {
	max-width: 250px;
	margin: 20px;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition: 1s;
}

img:hover {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}