SCSS

by cchana

HTML

<div class="entry">
<div class="blurb">
something
</div>
<div class="photo">
content
</div>
</div>

SCSS

.entry {
	position: relative;
	&:hover .photo {
		animation-duration:1s;animation-name:test;
	}
}
.blurb {
	background: red;
	color: #FFF;
	padding: 10px;
	position: relative;
	width: 100px;
	z-index: 2;
}
.photo {
	background: blue;
	border-color: #FFF;
	border-style: solid;
	border-width: 20px 20px 40px;
	box-shadow: 0 0 10px #000;
	height: 400px;
	left: 0;
	position: absolute;
	top: 0;
	transform: rotate(1deg);
	transition: transform 1s;
	width: 400px;
	z-index: 1;
}

@keyframes test {
	0% {
		transform: rotate(1deg);
	}
	50% {
		transform: rotate(0.5deg) translateX(200px);
	}
	100% {
		transform: rotate(0deg) translateX(0px);
		z-index: 3;
	}
}