Untitled

dabblet.css

figure:after {  background: rgba(255, 255, 255, 0.5);  content: "";  display: block;  height: 100%;  left: 0;  opacity: 0;  position: absolute;  top: 0;  width: 100%;  z-index: 4;  -webkit-transition: opacity 0.6s ease;  transition: opacity 0.6s ease;}figure:hover:after {  opacity: 1;}figure:hover img {  -webkit-filter: grayscale(1);          filter: grayscale(1);}figure:hover figcaption {  -ms-transform: translateX(0);  -webkit-transform: translateX(0);  transform: translateX(0);}figcaption {  font: 36px/1.6 Oswald, sans-serif;  left: 0;  padding: 100px 0 0 50px;  position: absolute;  text-transform: uppercase;  top: 0;  z-index: 5;  -ms-transform: translateX(-100%);  -webkit-transform: translateX(-100%);  transform: translateX(-100%);  -webkit-transition: all 0.3s ease;  transition: all 0.3s ease;}figcaption:before {  content: "“";  display: block;  font-size: 100px;  line-height: 10px;  margin: 0 0 -20px -5px;}img {  max-width: 100%;  position: relative;  z-index: 3;  -webkit-transition: all 1s ease;  transition: all 1s ease;}
body{padding:0;margin: 0;}
html,body{height: 100%;}
figure {
margin: 0;
max-height: 100%;
overflow: hidden;
}

dabblet.html

<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'><figure>  <img src="https://s.yimg.com/uy/build/images/sohp/hero/wildsee-pizol3.jpg" class="a" />  <figcaption>No es una coincidencia<br /> Que estemos al lado de un parque. <br /> No hay lugar mejor para un picnic</figcaption></figure>

dabblet.js

// alert('Hello world!');

settings.json

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