Depth of Field Test

by 2jddfsjad

HTML

<input type="radio" name="modal" id="toggle_modalsOff" class="toggleAll" hidden checked>




<!--1 Text-->
		<input type="radio" name="modal" id="toggle_modal1" class="toggle" hidden>
		<div>
			<label for="toggle_modalsOff"></label>
			<div>
				<label for="toggle_modalsOff">&#x1F5D9;</label>
				<label for="toggle_modal1.1">
					<img class="inarticle" src="https://dummyimage.com/600x400/e00000/000000"/></label>
					<p>Modal 1</p>
			</div>
		</div>
<!--1 Images-->
<input type="radio" name="modal" id="toggle_modal1.1" class="toggle" hidden>
<div>
	<label for="toggle_modalsOff"></label>
	<div>
		<label for="toggle_modal1">&#x1F5D9;</label>
		<img class="popup" src="https://dummyimage.com/600x400/e00000/000000"/>
		<p>
			Caption Image 1
		</p>
	</div>
</div>



<!--2 Text-->
<input type="radio" name="modal" id="toggle_modal2" class="toggle" hidden>
<div>
	<label for="toggle_modalsOff"></label>
	<div>
		<label for="toggle_modalsOff">&#x1F5D9;</label>
		<label for="toggle_modal2.1">
			<img class="inarticle" src="https://dummyimage.com/600x400/0034de/000000"/></label>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
			</p>
		<label for="toggle_modal2.2">
			<img class="inarticle" src="https://dummyimage.com/600x400/218f63/000000"/></label>
	</div>
</div>
<!--2 Images-->
<input type="radio" name="modal" id="toggle_modal2.1" class="toggle" hidden>
<div>
	<label for="toggle_modalsOff"></label>
	<div>
		<label for="toggle_modal2">&#x1F5D9;</label>
		<img class="popup" src="https://dummyimage.com/600x400/0034de/000000"/>
		<p>
			Caption Image 1
		</p>
	</div>
</div>
<input type="radio" name="modal" id="toggle_modal2.2" class="toggle" hidden>
<div>
	<label for="toggle_modalsOff"></label>
	<div>
		<label for="toggle_modal2">&#x1F5D9;</label>
		<img...

CSS

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	/* fix for pre "viewport meta" handhelds. */
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

html, body {
	height:100%;
	overflow:hidden;
	/*
		scrolling will be handled by inner DIV for best small-screen
		behavior. Otherwise we risk having two scrollbars with the modals.
	*/
}

.toggle,
.toggleAll {
	/*
		IE screws up the label relationship if 'hidden' so show them
		we want 'hidden" in the markup though so that non-screen users
		don't see a bunch of non-functional junk.
	*/
	display:block;
	/*
		But we still want them not visible, so slide them off the page
	*/
	position:absolute;
	left:-999em;
}

.toggle + div, /* outer modal div */
.toggle + div > label, /* outer close / deselect */
#content {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:auto; /* don't forget small screens! */
}

.toggle + div {
	box-sizing:border-box;
	padding:1em;
	display:grid;
	align-items:center;
	justify-content:center;
	z-index:2;
	/*
		Hide offscreen instead of display:none since 1) it's easier to animate
		with CSS, and 2) search engines look for display:none to ignore content
		as it has been abused to death by black-hat SEO dirtbags
	*/
	left:-999em;
	opacity:0;
	transition:opacity 0.3s, left 0s 0.3s;
	background:rgba(255,255,255,0.5);
}

.toggle:checked + div {
	left:0;
	opacity:1;
	transition:opacity 0.3s;
}

.toggle + div > div {
	position:relative;
	width:90%;
	max-width:40em;
	padding:1em;
	background:rgba(255,255,255,0.6);
	border-radius:0.5em;
	box-shadow:0 0 0.5em 1em...