<aside class="thumbnail">
    <img src="http://tsukulog.net/wp-content/uploads/2016/04/shared-img-thumb-PAK33_eibunichiretuninatte_TP_V.jpg" alt=""/>
    <div class="dot-overlay"></div>
</aside>
$gray-base:#000000;
body {
	margin: 0;
}

img {
	display: block;
	height: auto;
	max-width: 100%;
}

.thumbnail {
	position: relative;
	width: 250px;
}

.dot-overlay {
	background: rgba($gray-base, 0.4);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	&:before {
		background: url(http://tsukulog.net/wp-content/themes/tsukulog/image/dot.svg);
		content: '';
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.