For Netta: Background images appearing on hover

dabblet.css

/**
 * For Netta: Background images appearing on hover
 */

ul {
	list-style: none;
	padding: 0;
}

li:hover::after {
	z-index: -1;
	content: '';
	position: absolute;
	background-position: 50% 50%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
}

li:nth-child(1)::after {
	background-image: url(https://picsum.photos/400/300);
}

li:nth-child(2)::after {
	background-image: url(https://picsum.photos/500/400);
}

dabblet.html

<ul>
	<li><a href="#">First link</a></li>
	<li><a href="#">Second link</a></li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}