<div class="grid">
	<a href="http://css-irl.info" class="link" aria-labelledby="title1"></a>
	<div class="grid__img">
		<img src='https://images.unsplash.com/photo-1536429145793-67ab038bb4c3?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
	</div>
	<div class="grid__card">
		<h2 id="title1" aria-hidden="true">Velit aliquet sagittis</h2>
		<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<span class="fake-link">Read more <span>→</span></span>
	</div>
</div>

<div class="grid">
	<a href="http://css-irl.info" class="link" aria-labelledby="title2"></a>
	<div class="grid__img">
		<img src='https://images.unsplash.com/photo-1524603642524-b02ea114f009?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
	</div>
	<div class="grid__card">
		<h2 id="title2" aria-hidden="true">Eu scelerisque felis</h2>
		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		<span class="fake-link">Read more <span>→</span></span>
	</div>
</div>

@import url("https://fonts.googleapis.com/css?family=Montserrat:700");

* {
	box-sizing: border-box;
}

body {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	margin: 0;
	padding: 1rem;
	
	@media (min-width: 40em) {
		padding: 3rem;
	}
}

h2 {
	margin: 0 0 1rem;
	
	@media (min-width: 40em) {
		font-size: 4rem;
		line-height: 1.2;
		letter-spacing: -0.04em;
	}
}

p {
	line-height: 1.7;
	
	@media (min-width: 40em) {
		font-size: 1.2rem;
	}
}

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.grid {
	display: grid;
	grid-template: repeat(3, 1fr) / repeat(3, 1fr);
	max-width: 50rem;
	margin: 0 auto;
	position: relative;
	
	&:nth-child(2n) {
		.grid__card {
			grid-area: 1 / 1 / 3 / 3;
		}
		
		.grid__img {
			grid-area: 2 / 2 / 4 / 4;
		}
		
		.link::before {
			grid-area: 1 / 1 / 3 / 3;
		}
		
		.link::after {
			grid-area: 2 / 2 / 4 / 4;
		}
	}
	
	& + .grid {
		margin-top: 3rem;
		
		@media (min-width: 40em) {
			margin-top: 5rem;
		}
	}
}

.grid__img {
	position: relative;
	grid-column: 1 / 3;
	grid-row: 1 / 3;
	grid-area: 1 / 1 / 3 / 3;
	transition: opacity 200ms, filter 200ms;
	
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0));
	}
	
	img {
		width: 100%;
	}
}

.grid__card {
	grid-area: 2 / 2 / 4 / 4;
	padding: 1rem;
	transition: color 200ms;
	border: 0.3rem solid;
	opacity: 0.99;
	
	@media (min-width: 40em) {
		padding: 2rem;
	}
}

.link {
	display: block;
	grid-area: 1 / 1 / -1 / -1;
	display: grid;
	grid-template: repeat(3, 1fr) / repeat(3, 1fr);
	pointer-events: none;
	z-index: 1;
	
	@supports (grid-template: subgrid / subgrid) {
		grid-template: subgrid / subgrid;
	}
	
	&::before,
	&::after {
		position: relative;
		pointer-events: auto;
	}
	
	&::before {
		content: '';
		grid-area: 1 / 1 / 3 / 3;
	}
	
	&::after {
		content: '';
		grid-area: 2 / 2 / 4 / 4;
	}
	
	&:hover,
	&:focus {
		~ .grid__img {
			opacity: 0.8;
			filter: grayscale(100%);
		}
		
		~ .grid__card {
			color: blue;
		}
		
		~ .grid__card .fake-link {
			text-decoration: none;
			
			span {
				transform: translate3d(0.5rem, 0, 0);
			}
		}
	}
}

.fake-link {
	display: inline-flex;
	margin-top: 2rem;
	text-decoration: underline;
	
	span {
		transition: transform 200ms;
	}
}