CSSTransitionsAnimations - 08 - Exercise

csstransitionsanimations-08-exercise.markdown

CSSTransitionsAnimations - 08 - Exercise

A Pen by Abdoul Aziz BA on CodePen.

License.

index.html

<h1>Exercice 8</h1>
Apply CSS transitions to animate the opening letters.
<div class="deck">
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/cat1.jpg" alt="" /></div>
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/cat2.jpg" alt="" /></div>
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/cat3.jpg" alt="" /></div>
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/cat4.jpg" alt="" /></div>
	<div class="card"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/455884/cat5.jpg" alt="" /></div>
</div>

style.css

html,
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	position: relative;
	background-color: white;
}

.deck {
	position: relative;
	left: 50%;
	width: 250px;
	height: 300px;
	transform: translateX(-50%);
	border: none;
}

.card {
	position: absolute;
	top: 0px;
	left: 0px;
	width: inherit;
	height: inherit;
	transition: all 1s ease-in-out;
	transform-origin: left bottom;
	border: none;
	outline: none;
}

.card img {
	width: inherit;
	height: inherit;
	border: none;
	filter: brightness(2.2) contrast(1.5) grayscale(0.1);
}

.card:hover {
	outline: 3px solid red;
}

.deck:hover .card:nth-child(1) {
	transform: rotate(-20deg);
}

.deck:hover .card:nth-child(1):hover {
	transform: scale(1.2, 1.2) rotate(-20deg);
}

.deck:hover .card:nth-child(2) {
	transform: rotate(-10deg);
}

.deck:hover .card:nth-child(2):hover {
	transform: scale(1.2, 1.2) rotate(-10deg);
}

.deck:hover .card:nth-child(3) {
	transform: rotate(0deg);
}
.deck:hover .card:nth-child(3):hover {
	transform: scale(1.2, 1.2) rotate(0deg);
}

.deck:hover .card:nth-child(4) {
	transform: rotate(10deg);
}
.deck:hover .card:nth-child(4):hover {
	transform: scale(1.2, 1.2) rotate(10deg);
}

.deck:hover .card:nth-child(5) {
	transform: rotate(20deg);
}
.deck:hover .card:nth-child(5):hover {
	transform: scale(1.2, 1.2) rotate(20deg);
}