big clickin

dabblet.css

/**
big clickin */

html{background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
padding: 80px;}

.big-clickin {
position: relative;
background: rgba(255,255,255,.3);
padding: 10px;
opacity: .5;
}

.big-clickin:hover {
	opacity: 1;
}
.big-clickin a:after {
	display: block;
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.img {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: black;
	margin-left: 10px;
}

dabblet.html

<div class="big-clickin">
	<a href="#">Link</a><div class="img"></div>
	<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>


<div class="big-clickin">
	<a href="#">Link</a><div class="img"></div>
	<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="big-clickin">
	<a href="#">Link</a><div class="img"></div>
	<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="big-clickin">
	<a href="#">Link</a><div class="img"></div>
	<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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