Untitled

dabblet.css

.banner { width: 300px; height: 200px; overflow: hidden; position: relative; }
.banner > a { position: absolute; top: -100%; bottom: -100%; left: -100%; right: -100%; text-align: center; }
.banner > a:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
.banner > a > img { vertical-align: middle; }

.banner:after { content:""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.3); }

dabblet.html

<div class="banner">
	<a href="#"><img src="//placehold.it/500x300" alt=""/></a>
</div>

<div class="banner">	
	<a href="#"><img src="//placehold.it/100x100/ff0000" alt=""/></a>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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