Image zoom

[zeigerpuppy]

I would like to implement an image viewer function in the wiki. I thought something with pure CSS may be good, perhaps like this: http://www.inserthtml.com/2012/04/css-image-gallery/ or https://github.com/noelboss/featherlight/ I presume the best way to test this would be in realms/static/css/style.css

[zeigerpuppy]

I managed to get a rudimentary image zoom/lightbox going, using essentially only CSS code. the code is from here: http://www.thecssninja.com/css/futurebox

added to style.css

.overlay
{
    width: 100%;
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
    z-index: 999;
    background: rgba(0,0,0,0.7);
}
    .overlay a
    {
        display: table-cell; 
        vertical-align: middle; 
        text-align: center;
    }
        .overlay img
        {
            padding: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            background: #ffffff;
        }

.overlay:target { display: table; }

Add an image using the style in the wiki page, (html code):

<a href="#image2"><img src="http://www.hlevkin.com/TestImages/barbara.bmp" width="100" alt="test" id="imagebox01" /></a>
<div class="overlay" id="image2">
        <a href="#close" title="Close image"><img src="http://www.hlevkin.com/TestImages/barbara.bmp" alt="test"  /></a>
    </div>

I wonder whether it would be possible to integrate this with a simple tag? I'm not sure how the markup tags are converted to HTML, but ideally I would suggest this as the default behaviour for images.