.container
	- 4.times do
		%a{:href => "https://codepen.io/gabriellewee", :target => "_blank"}
	.card
		%h1 Hover over me

// 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 individual hover effects
		&:hover, &:focus {
			border: 6px solid rgba(white, .5)!important;
			~ .card {
				color: white;
			}
		}
		// top left
		&:nth-child(1) {
			top: 0;
			left: 0;
			&:hover, &:focus {
				~ .card {
					background: red;
				}
			}
		}
		// top right
		&:nth-child(2) {
			top: 0;
			right: 0;
			&:hover, &:focus {
				~ .card {
					background: blue;
				}
			}
		}
		// bottom right
		&:nth-child(3) {
			bottom: 0;
			right: 0;
			&:hover, &:focus {
				~ .card {
					background: green;
				}
			}
		}
		// bottom left
		&:nth-child(4) {
			bottom: 0;
			left: 0;
			&:hover, &:focus {
				~ .card {
					background: purple;
				}
			}
		}
	}
	.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: block;
		// top left
		&:nth-child(1) {
			border: 6px solid rgba(red, .5);
		}
		// top right
		&:nth-child(2) {
			border: 6px solid rgba(blue, .5);
		}
		// bottom right
		&:nth-child(3) {
			border: 6px solid rgba(green, .5);
		}
		// bottom left
		&:nth-child(4) {
			border: 6px solid rgba(purple, .5);
		}
	}
	.card {
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		h1 {
			font-size: 24px;
		}
	}
}