Untitled

dabblet.css

article {
width:16%;
}
.pgrd-content {
    border: 4px solid #BF6B04;
    position: relative;
    box-shadow: 1px 1px 8px #888;
}
.pgrd-item{
    position: relative;
}
.pgrd-icon{
    font-size: 2.2em;
}
.pgrd-icon:hover{
    background: #BF6B04;
    color: #fff;
    cursor: pointer;
}
.turn{
    position: absolute;
    top: 0;
    right: 0;
    padding: 0   .3em;
    font-family: sans-serif;
    background: rgba(255, 242, 234, .5);
    z-index: 3;
} 
.img2 {
    display: none;
}
.pgrd-description {
    bottom: 0;
    position: absolute;
    background: rgba(255, 242, 234, .7);
    display: none;
    padding: 0 .4em;
}
.productsgrd>*:hover .pgrd-description {
    display: block;
}
.turn+input:checked+div img{
    display: none;
}
.turn+input{
    display: none;
}
.turn+input:checked+div img.img2{
    display: block;
}
.pgrd-options {
    display: table;
    border-top: 4px solid #BF6B04;
    width: 100%;
    padding: 0;
    margin: 0;
}
.pgrd-options li{
    list-style: none;
    display: inline;
    display: table-cell;
    height: 3em;
    border-left: 4px solid #BF6B04;
    vertical-align: top;
}
.pgrd-options li>*{
    text-align: center;
    width: 100%;
    display: block;
    border: none;
    text-decoration: none;
    color: #BF6B04;
    padding: 0;
    height: 100%;
}
.pgrd-options li:hover>*{
    background: #BF6B04;
    color: #fff;
    cursor: pointer;
}
.pgrd-options li:first-child{
    border-left: none;
}
.pgrd-options .pgrd-selectlist label>div{
    font-size: 1.1em; 
    padding: .2em 0;
}
.pgrd-options .pgrd-selectlist label:hover>div{
    background-color: #BF6B04;
    color: #fff;
}
.pgrd-options .pgrd-selectlist label{
    position: relative;
}
.pgrd-options .pgrd-selectlist input{
    position: absolute;
    left: .4em;
    top: .4em;
}
.pgrd-options .pgrd-selectlist input:checked+*, .pgrd-options .pgrd-selectlist label:hover>input:checked+*{
    background-color: #E4A531;
    color: #000;
}
.pgrd-options .pgrd-selectlist label{
    border-top: 4px solid #BF6B04;
    display: block;
    width: 100%;
}
.pgrd-options .pgrd-selectlist{
    color: #000;
    position: absolute;
    background: #fff;
    border: 4px solid #BF6B04;
    border-width: 0 0 4px 4px;
    bottom: 2.5em;
    left: -4px;
    display: none; 
    right: 0;
}
.pgrd-options .pgrd-select:hover .pgrd-selectlist{
    display: block;
}
.pgrd-price a:before {
    background: none repeat scroll 0 0 #FDF7F4;
    border-radius: 4px 4px 4px 4px;
    box-shadow: -1px -1px 1px #888;
    content: "";
    display: inline-block;
    height: 8px;
    left: 0.3em;
    position: absolute;
    top: 0.3em;
    width: 8px;
}
.pgrd-price a {
    box-shadow: 1px 1px 1px #888;
    background: none repeat scroll 0 0 #E4A531;
    border-radius: 0.4em 0.2em 0.2em 1.2em;
    color: #FFFFFF;
    float: right;
    font-size: 1.7em;
    letter-spacing: 0.03em;
    margin: 0.4em 0;
    padding: 0 0.3em 0 0.9em;
    position: relative;
    text-decoration: none;
    transform: rotate(3deg);
}
.addtocart span{
    position: relative;
}
.addtocart span{
    position: absolute;
}

dabblet.html

<article itemtype="http://schema.org/Product" itemscope=""> 
	<h3 itemprop="name">Book "Est" by "Maxie...</h3>
	<div class="pgrd-content">
		<label for="turnbook-est-by-maxie-abernathy" class="turn  pgrd-icon">↺</label>
		<input type="checkbox" id="turnbook-est-by-maxie-abernathy">
		<div class="pgrd-item txtcenter">
			<a itemprop="url" title="Show product" href="/app_dev.php/p/book-est-by-maxie-abernathy">
				<img src="http://placehold.it/262x255" class="center">				
				<img src="http://placehold.it/262x255" class="img2 center">
			</a>
			<div itemprop="description" class="pgrd-description">
		        <p>Expedita maiores commodi ex suscipit eum.</p>
			</div><!--/end .description-->
		</div>
        <form class="clearfix" method="post" action="/app_dev.php/cart/add?id=101">

				<input type="hidden" value="1" class="center-text" min="1" required="required" name="sylius_cart_item[quantity]" id="sylius_cart_item_quantity">
		<input type="hidden" value="2abc79cae4a9bd6b9d4fa73e988288972196a39a" name="sylius_cart_item[_token]" id="sylius_cart_item__token">
                    

		<ul class="pgrd-options">
			<li class="pgrd-optcompare"><a title="Compare product" href="/app_dev.php/p/book-est-by-maxie-abernathy" class=" pgrd-icon">𝌮</a></li>
			<li class="pgrd-optfav"><a title="Add product to loved list" href="/app_dev.php/p/book-est-by-maxie-abernathy" class=" pgrd-icon"> 	♥</a></li>
        				<li class="pgrd-optcart">
	            					<button class="addtocart pgrd-icon" type="submit"><span>↴</span>⎵</button>
	            			</li>
		</ul>		
        </form>
	</div>
	<span class="pgrd-price" itemprop="price"><a href="/app_dev.php/p/book-est-by-maxie-abernathy">€8.31</a></span>

</article>

dabblet.js

// alert('Hello world!');

settings.json

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