CSS3 image frame-border z-index

Question

I have the following markup for my images:

img.framed
{
    border-image: url(\'../images/design/frame.png\') 40 40 40 40 stretch stretch;
    border-color:          


        

Answer 1

Some part of the image would have to be hidden to create what you want.

Create the main div that has your image, and another div for frame border.

This main div is relatively positioned, so that absolutely positioned elements inside it are relative to it.

Apply your frame border background to child div, and not the image. This child div should be almost the same width and height of image and z-index more than image. Also, position it slightly top and left to image.

<div class="main">
    <div class="image-container">
    <!-- does not actually contain the image -->
    </div>
    <img src="some image"/>
</div>

JS Fiddle

I used plain borders to show overlap. The green border overlaps the yellow bg of image.

Here's the CSS:

.main {
    position: relative;
    top: 100px;
    left: 10%;
}
.image-container {
    position: absolute;
    left: -70px;
    top: -70px;
    border: 20px solid rgba(25,255,25, 0.5);
    z-index: 5;
    width: 230px;
    height: 330px;
    border-image: url('your frame link') 90 90 90 90 stretch stretch;
    border-color: #f4be52;
    border-style: inset;
    border-width: 86px;
}
img {
    position: absolute;
    background: #eaff77;
    width: 260px;
    height: 360px;
    z-index: 1;
}
.main:hover > img {
    z-index: 10;
}

Update:
I have updated the fiddle with real images and proper width and height. Plz check.
When you hover on the image, you see the real size. This is just to prove that the Frame is actually overlapping the image, which is what you wanted.