Untitled

dabblet.css

.photo {  
	overflow: hidden;
}  
  
.photo img {  
    position: absolute;   
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
} 
 
.photo .caption {  
    background-color: rgba(0,0,0,0.8);  
    position: absolute; 
    left:-200px;
    top:17%; 
    color:#fff;
    font-family:'Source Sans Pro', sans-serif;
    font-size: 1.4vw;
    text-align:right;
	line-height:1;
	width:200px;
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
} 

.photo .scale-caption p { 
	position: relative;  
    left: -200px;
    padding-right:1vw;
    padding-left:2vw;
    padding-top:0px;
    padding-bottom:0px;
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    -webkit-transition-delay: 500ms;  
    -moz-transition-delay: 500ms;  
    -o-transition-delay: 500ms;  
    -ms-transition-delay: 500ms;  
    transition-delay: 500ms;  
} 

.photo:hover img {  
   -moz-transform: scale(1.4);  
   -o-transform: scale(1.4);  
   -webkit-transform: scale(1.4);  
   transform: scale(1.4);
}
 
.photo:hover .scale-caption p {  
    -moz-transform: translateX(200px);  
    -o-transform: translateX(200px);  
    -webkit-transform: translateX(200px);  
    transform: translateX(200px);  
} 
.photo:hover .caption {  
    -moz-transform: translateX(200px);  
    -o-transform: translateX(200px);  
    -webkit-transform: translateX(200px);  
    transform: translateX(200px);  
}

dabblet.html

<article class="photo">  
        {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
            <span class="caption scale-caption"><p>{block:Caption}{Caption}{/block:Caption}</p></span>  
</article>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}