@AdamWhitcroft's "dot" effect in pure css. http://adamwhitcroft.com

dabblet.css

/**
 * @adamwhitcroft's "dot" effect in pure css. http://adamwhitcroft.com
 * I made it as reall as possible, but the grid lines are darker, rather
 * than the spaces between them, like in Adam's version.
 
 * Compare to http://adamwhitcroft.com/wp-content/themes/Fifth/img/dot.png
 */
 
/* Make sure the image stays in it's container */
img { max-width: 100%; }

/* Center the image */
.poster {
	position: absolute;
	top: 50%; left: 50%;
	margin-left: -250px; margin-top: -168.5px;
	width: 500px;
}

/* The real work */
.poster:before {
	content: ''; /* Make it a valid pseudo-element */
	
	/* Make it the full size, minus the little space images add? */
	position: absolute;
	left: 0; right: 0; bottom: 5px; top: 0;
	
	/*
	 * Make the grid.
	 * It had to be made of black or the dots would get darker where the grid lines crossed.
	 * Because of this, we use opacity to change the black to a translucent black.
	 */
	background-image: linear-gradient(black 50%, transparent 50%), linear-gradient(left, transparent 50%, black 50%);
	background-size: 2px 2px;
	opacity: 0.5; /* Adjust to preference */
}

dabblet.html

<div class="poster">
	<img src="http://assets.nath.is/blog/posts/texture.jpg">
</div>

settings.json

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