CSS html : non-standard picture frame: how to imlement with CSS and HTML?

Question

I am trying to create a photoslider, in the main content there has to be a changing picture in the frameö http://syrdoccam.com/newfilika/index.html

I am using this frame http://syrdoccam.com/newfilika/images/frame.png

<div id="projectpicture">
    <img id="projpicFrame" src="images/frame.png">
    <a class="projlink" href="http://www.filikaajans.com">
        <img id="picProj" src="images/projpic.png">
    </a>
    <div id="arrows">
</div>



#projpicFrame {
    margin-top: -7px;
    margin-left: 50px;
}

#picProj {
    margin-left: -569px;
    margin-top: -7px;
    position: absolute;
}

I want to accomplish this in a good way?

Answer 1

Admittedly, I've shied away from CSS masks for compatibility reasons. If you know your core audience is going to be able to see them, then go for it.

There's also the idea of adaptive design: offering an experience for all that offers a similar UX/UI.

To that point, I offer this:

Make the outside of the mask match your background-image or color. Then only have transparency where you truly need it. This approach will allow for a slider in IE7 ... just sayin.

Offer the simplest solution as the default. Then use javascript feature detection to load the SVG, if you've got a compatible browser viewing the site.