Frame over image

by OmShiv

HTML

<div class="main">
    <div class="image-container">
    <!-- does not actually contain the image -->
    </div>
    <img src="http://www.wildlifeextra.com/resources/listimg/uk/2012/[email protected]"/>
</div>

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('http://www.katherinetailoring.co.uk/images/frame.png') 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;
}