.container
	- 4.times do
		%a{:href => "https://codepen.io/gabriellewee", :target => "_blank"}
	.card
		%h1 Hover over me
View Compiled
// basic required styling
.container {
	position: relative;
	// you don't need width and height if your card already has a lot of content
	width: 100%;
	max-width: 400px;
	height: 250px;
	a {
		position: absolute;
		z-index: 1;
		width: 50%;
		height: 50%;
		// added in hover effect
		&:hover, &:focus {
			~ .card {
				background: gray;
				color: white;
			}
		}
		// top left
		&:nth-child(1) {
			top: 0;
			left: 0;
		}
		// top right
		&:nth-child(2) {
			top: 0;
			right: 0;
		}
		// bottom right
		&:nth-child(3) {
			bottom: 0;
			right: 0;
		}
		// bottom left
		&:nth-child(4) {
			bottom: 0;
			left: 0;
		}
	}
	.card {
		position: relative;
		z-index: 0;
		// you don't need width and height if your card already has a lot of content
		width: 100%;
		height: 100%;
	}
}

// some basic styling for demo purposes
$p: 12px;
*, *:before, *:after { box-sizing: border-box; }
* { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }
a { text-decoration: none; }

body {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	padding: $p;
}

.container {
	a {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		font-size: 48px;
		color: white;
		// top left
		&:nth-child(1) {
			background: rgba(red, .5);
			&:after {
				content: "1";
			}
			&:hover, &:focus {
				background: rgba(red, .75);
			}
		}
		// top right
		&:nth-child(2) {
			background: rgba(blue, .5);
			&:after {
				content: "2";
			}
			&:hover, &:focus {
				background: rgba(blue, .75);
			}
		}
		// bottom right
		&:nth-child(3) {
			background: rgba(green, .5);
			&:after {
				content: "3";
			}
			&:hover, &:focus {
				background: rgba(green, .75);
			}
		}
		// bottom left
		&:nth-child(4) {
			background: rgba(purple, .5);
			&:after {
				content: "4";
			}
			&:hover, &:focus {
				background: rgba(purple, .75);
			}
		}
	}
	.card {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		border: 2px solid #aaa;
		h1 {
			font-size: 24px;
		}
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.