Untitled

dabblet.css

body {
	background: lightyellow;
	margin-right: 50%;
}

.img {
	position: relative;
	background-size: contain;
	/* вычисляется из отношения сторон картинки */
	padding-bottom: 62.5%;
}

.overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	cursor: pointer;
}

.img:hover .overlay {
	display: block;
}

button {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -9px 0 0 -40px;	
}

dabblet.html

<div class="img" style="background-image: url('http://yandex.ru/images/today?size=2560x1600');">
	<div class="overlay">
		<button>Посмотреть</button>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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