SOURCE

<div id='mask' class='img big'></div>
<div class='big halftone filtered'></div>
<div class='img small original'></div>
<div class='img small filtered'></div>

$d: .375em;
$h: 90vh;
$g: 2vh;
$img: url(https://i1.wp.com/digital-photography-school.com/wp-content/uploads/2015/08/black-and-white-portrait-tips-3088.jpg?resize=500%2C750&ssl=1) 50%/ cover;
$ratio: 1.5;

body {
	display: grid;
	grid-gap: $g;
	grid-template: repeat(2, .5*($h - $g))/ #{$h/$ratio} .5*($h - $g)/$ratio;
	grid-auto-flow: column dense;
	place-content: center;
	margin: 0;
	min-height: 100vh;
	font: 700 1.25em/1.5 trebuchet ms, sans-serif;
	
	&::before {
		grid-column: 1;
		grid-row: 1;
		height: max-content;
		transform: translatey(-100%);
		text-align: center;
		content: 'HALFTONE RESULT'
	}
	
	&::after {
		grid-column: 2;
		grid-row: 2;
		place-self: end center;
		height: max-content;
		transform: translatey(100%);
		font-family: consolas, ubuntu mono, monaco, monospace;
		content: 'filter: contrast(10)'
	}
}

#mask {
	position: absolute;
	bottom: 100%; right: 100%;
}

.img { background: $img }

.big { width: $h/$ratio; height: $h }

.original {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	
	&::before {
		position: absolute;
		bottom: 100%; width: 100%;
		text-align: center;
		content: 'ORIGINAL IMAGE'
	}
}

.filtered { filter: contrast(10) }

.small.filtered {
	grid-column: 2;
	grid-row: 2
}

.halftone {
	grid-column: 1;
	grid-row: 1/ -1;
	position: relative;
	background: #fff;
  
  &::before {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(circle, #000, transparent 70%) 0 0/ #{$d} #{$d} round;
    
    mask: -moz-element(#mask), linear-gradient(#fff, #fff);
    mask-composite: exclude;
    mask-mode: luminance;
    content: ''
  }
}