h1
	| MAKEUP PALETTES 
	small Hover on any palette...

.main-content
	.palette__wrapper
		.palette.palette--one
			.palette__cover
				.palette__cover__border
					span Yellow Flicker Beat.
			.palette__cover__top
			.palette__base
				- for (var i=0; i<5; i++)
					.palette__shade
		h4 Yellow Flicker Beat
			small Lorde
	.palette__wrapper
		.palette.palette--two
			.palette__cover 
				.palette__cover__border
					span Four Pink Walls.
			.palette__cover__top
			.palette__base
				- for (var i=0; i<4; i++)
					.palette__shade
		h4 Four Pink Walls
			small Alessia Cara
	.palette__wrapper
		.palette.palette--three
			.palette__cover 
				.palette__cover__border
					span Blue on blue.
			.palette__cover__top
			.palette__base
				- for (var i=0; i<8; i++)
					.palette__shade
		h4 Blue on Blue
			small James Blunt
	.palette__wrapper
		.palette.palette--four
			.palette__cover 
				.palette__cover__border
					span Little Black Dress.
			.palette__cover__top
			.palette__base
				- for (var i=0; i<5; i++)
					.palette__shade
		h4 Little Black Dress
			small Sara Bareilles
aside.context
	.explanation
		| Based on songs by four very awesome singer-songwriters :)
		br
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid collection here
		| .

footer
	a(href="https://twitter.com/meowlivia_" target="_blank")
		i.icon-social-twitter.icons
	a(href="https://github.com/oliviale" target="_blank")
		i.icon-social-github.icons
	a(href="https://dribbble.com/oliviale" target="_blank")
		i.icon-social-dribbble.icons
View Compiled
$yellow: #ffc303;
$coral: #2a2e45;
$pink2: #ee4266;
$blue: #0075c4;

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: faf5f6;
	font-family: "Quicksand", sans-serif;
	color: #333;
}

aside.context {
	text-align: center;
	color: #333;
	line-height: 1.7;
	a {
		text-decoration: none;
		color: #333;
		padding: 3px 0;
		border-bottom: 1px dashed;
	}
	.explanation {
		max-width: 700px;
		margin: 4em auto 0;
	}
}

footer {
	text-align: center;
	margin: 3em auto;
	width: 100%;
	a {
		text-decoration: none;
		display: inline-block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed #333;
		color: #333;
		margin: 5px;
		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}
		.icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}
	}
}

h1 {
	width: 100%;
	margin: 3em auto 1.5em;
	font-size: 40px;
	text-align: center;
	small {
		text-transform: none;
		display: block;
		margin: 20px 0;
		font: 300 20px "QuickSand", sans-serif;
		color: #999;
	}
}

h4 {
	width: 100%;
	margin: 2em auto 0;
	font-size: 20px;
	text-align: center;
	small {
		text-transform: uppercase;
		display: block;
		margin: 10px 0;
		font: 300 15px "QuickSand", sans-serif;
		color: #999;
	}
}

.main-content {
	display: flex;
	flex-wrap: wrap;
	margin: 3em auto 0;
	max-width: 1000px;
	justify-content: space-around;
	align-items: center;
}

.palette__wrapper {
	flex: 1;
	padding: 20px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.palette {
	width: 200px;
	height: 200px;
	position: relative;
	display: inline-block;
	perspective: 800px;
	&__cover {
		border-radius: 6px;
		width: inherit;
		height: inherit;
		position: absolute;
		top: 0;
		z-index: 2;
		transition: 0.3s ease;
		transform-origin: top left;
		font: 900 28px/0.9 "Poppins", sans-serif;
		text-transform: uppercase;
		color: #fff;
		overflow: hidden;
		&__border {
			width: 80%;
			height: 80%;
			border: 7px solid #fff;
			margin: 10%;
		}
		span {
			display: inline-block;
			position: absolute;
			bottom: 7.5px;
			left: 10px;
			padding: 10px;
			max-width: 50%;
		}
		&__top {
			position: absolute;
			left: 0;
			width: calc(100% + 64px);
			margin-left: -32px;
			z-index: 4;
			border-radius: 3px 3px 4px 4px;
			opacity: 0;
		}
	}
	&__base {
		background: #222;
		width: inherit;
		height: inherit;
		position: absolute;
		top: 0;
		border-radius: 8px;
		padding: 15px;
		grid-gap: 8px;
	}
	&:hover {
		.palette__cover {
			transform: rotateX(78deg);
		}
		.palette__cover__top {
			animation: startTransition 0.17s forwards 0.1s;
		}
	}
}

@keyframes startTransition {
	0% {
		opacity: 0;
		top: 200px;
		transform: scale(0.5);
		height: 0;
	}
	40% {
		opacity: 1;
	}
	100% {
		top: 22px;
		opacity: 1;
		transform: scale(1);
		height: 15px;
		box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.2);
	}
}

.palette__shade {
	border-radius: 4px;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
}

.palette--one {
	.palette__base {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
	.palette__shade {
		&:nth-child(1) {
			grid-row: 1 / span 2;
			grid-column: 2 / span 1;
			margin: 20px 0;
			background: #fadc89;
		}
		&:nth-child(2) {
			background: #fce95b;
		}
		&:nth-child(3) {
			background: #ffd03a;
		}
		&:nth-child(4) {
			background: #fde008;
		}
		&:nth-child(5) {
			background: #fec309;
		}
	}
	.palette__cover {
		background: $yellow;
		&__top {
			background: #ecb404;
		}
		span {
			max-width: 50%;
			background: $yellow;
		}
	}
}

.palette--two {
	.palette__base {
		display: grid;
		grid-gap: 12px;
		justify-self: center;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
	.palette__cover {
		background: $pink2;
		&__top {
			background: #e23a5d;
		}
		span {
			max-width: 62%;
			background: $pink2;
		}
	}
	.palette__shade {
		&:nth-child(1) {
			background: #ee898d;
		}
		&:nth-child(2) {
			background: #ec6b73;
		}
		&:nth-child(3) {
			background: #d25980;
		}
		&:nth-child(4) {
			background: #c24d88;
		}
	}
}

.palette--three {
	.palette__cover {
		background: $blue;
		&__top {
			background: #016cb4;
		}
		span {
			max-width: 48%;
			background: $blue;
		}
	}
	.palette__base {
		display: grid;
		grid-gap: 8px;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(4, 1fr);
	}
	.palette__shade {
		&:nth-child(1) {
			grid-row: 1 / span 2;
			grid-column: 1 / span 2;
			background: #93dfe3;
		}
		&:nth-child(2) {
			grid-row: 3 / span 2;
			background: #01c0f3;
		}
		&:nth-child(3) {
			grid-row: 1 / span 2;
			grid-column: 3 / span 2;
			background: #21d0e5;
		}
		&:nth-child(4) {
			grid-row: 3 / span 2;
			grid-column-start: 4;
			background: #00aae7;
		}
		&:nth-child(6) {
			background: #69b3cd;
		}
		&:nth-child(5) {
			background: #4ad1eb;
		}
		&:nth-child(8) {
			background: #0983d5;
		}

		&:nth-child(7) {
			background: #149ecb;
		}
	}
}

.palette--four {
	.palette__base {
		display: grid;
		grid-template-columns: 50% auto;
		grid-template-rows: auto 20% 20%;
	}
	.palette__shade {
		&:nth-child(1) {
			grid-row: 1/ span 2;
			background: #bfbfbf;
		}
		&:nth-child(2) {
			grid-row: 3 / span 1;
			background: #a1a1a1;
		}
		&:nth-child(3) {
			background: #717171;
		}
		&:nth-child(4) {
			background: #585858;
		}
		&:nth-child(5) {
			background: #4b4b4b;
		}
	}
	.palette__cover {
		background: $coral;
		&__top {
			background: #171926;
		}
		span {
			max-width: 59%;
			background: $coral;
		}
	}
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js