p change the image background (thumbnails) / the text (contentEditable)

- for(var i = 0; i < 7; i++) {
	input(type='radio' name='opt' id=`thumbnail-${i}` checked=i?null:'checked')
	label(for=`thumbnail-${i}`) image #{i}
- }

header.blending
	h2(contentEditable='true' role='textbox' aria-multiline='true') And stay alive

header.textclip
	h2(contentEditable='true' role='textbox' aria-multiline='true') And stay alive
View Compiled
$base: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_';
$imgs: 'art_bw_bg', 'art_bw_butterfly_bg', 
	'cat_bg_00', 'cat_bg_01', 'cat_bg_02', 'cat_bg_03', 'cat_bg_04';
$n: length($imgs);
$d: 100vmin/($n + 3);
$g: .25*$d;
$sh: 0 3px 1px orange;

* { margin: 0; padding: 0 }

body {
	display: flex;
	height: 100vh;
	font: 900 6.5vw/ 100vh cookie;
	text-align: center;
	
	@media (orientation: portrait) {
		flex-direction: column;
		font-size: 9vw;
		line-height: 50vh;
		
		[for] { left: $g }
	}
}

p {
	position: absolute;
	bottom: $g; left: 50%;
	padding: .375em .5em .5em;
	transform: translate(-50%);
	background: darkorange;
	color: white;
	font: 1.25rem trebuchet ms, tahoma, verdana, sans-serif
}

input, label { position: absolute; }

input {
	left: -100vw;
	
	&:checked + label {
		filter: none;
		background-blend-mode: normal;
	}
	
	&:focus, &:hover {
		& + label { filter: sepia(1) }
	}
}

label {
	z-index: 2;
	overflow: hidden;
	top: $g;
	width: $d; height: $d;
	border-radius: 5px;
	box-shadow: 0 0 0 3px currentcolor, 0 0 0 4px #fff;
	background: grey 50%/ cover;
	text-indent: -100vw;
	background-blend-mode: screen;
	transition: .5s;
	cursor: pointer;
}

@for $i from 0 to $n {
	$off: calc(50% + #{($i - .5*$n)*($d + $g) + .5*$g});
	$img: url($base + nth($imgs, $i + 1) + '.jpg');
	
	[id='thumbnail-#{$i}']:checked ~ header {
		background-image: $img;
	}
	
	[for='thumbnail-#{$i}'] {
		left: $off;
		background-image: $img;
		
		@media (orientation: portrait) {
			top: $off;
		}
	}
}

header {
	flex: 1;
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_cat_bg_04.jpg) 50%/ cover;
	
	&.blending h2 {
		color: white;
		text-shadow: $sh;
		mix-blend-mode: difference
	}
	
	&.textclip h2 {
		background: inherit;
		-webkit-background-clip: text;
						background-clip: text;
		color: transparent;
		filter: invert(1) grayscale(1) contrast(2) 
			drop-shadow($sh)
	}
}

h2:focus { outline: none }
View Compiled

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js