Untitled

dabblet.css

.photoFrame {
    overflow: hidden;
    display: inline-block;
    padding: 2px;
    background-color: #fff;
    border: solid 1px #DDE8EA;
    }
    
    .photoFrame img {
           display: block;
           }
           
    .photoFrame:hover {
        border-color: #8B9FA4;
        }
        
.zoom {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 50px;
    margin-top: -25px;
    margin-left: -25px;
    opacity: 1;
    pointer-events: none;

    transition:opacity .5s linear;
    transition-delay: 2s;
    
    backface-visibility: hidden; /* activating hardware acceleration */
    }
    
    .zoom_dec {
        display: block;
        width: 50px;
        height: 50px;
        background-image: url(http://dl.dropbox.com/u/6594451/zoom.png);
        
        transition: opacity .3s linear;
        opacity: 0;
        }        

.zoom_w {
    position: relative;
    }

    .zoom_w:hover .zoom_dec {
        opacity: 1;
        }
        
    .zoom_w:after {        
        content:"";
        position: absolute;
        top: -1px; right: -1px; bottom: -1px; left: -1px;
        }
        
    .zoom_w:active .zoom {
        transform: scale(2);
        opacity: 0;

    	transition:transform .5s cubic-bezier(0,1,0,1),opacity .5s cubic-bezier(0,1,0,1);
        }​

dabblet.html

<!-- + PrefixFree -->
<p>Click on image</p>
<a href="#777" class="photoFrame zoom_w">
    <img src="http://dl.dropbox.com/u/6594451/ok_photo_sm3.jpg">
    <i class="zoom"><i class="zoom_dec"></i></i>
</a>

​

settings.json

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