2

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: #f4be52; border-style: inset; border-width: 40px;
}

And I am getting this result:

enter image description here

I don't like, that image inside frame overrides part of my frame.

How can I modify my code to get frame displayed over the image?

Like that:

enter image description here

Edward Ruchevits
  • 6,411
  • 12
  • 51
  • 86

1 Answers1

3

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.

Community
  • 1
  • 1
Om Shankar
  • 7,989
  • 4
  • 34
  • 54
  • So could you please show the example with some semi-transparent png image? With plain borders it's pretty obvious. Here is one for example: http://www.katherinetailoring.co.uk/images/frame.png – Edward Ruchevits Aug 06 '13 at 13:02
  • 1
    @EdwardRuchevits, I have updated the fiddle. Check it give feedback plz. – Om Shankar Aug 08 '13 at 10:02
  • 1
    Cool! That's very good, thank you! Bounty is waiting for you, just have to wait 24 hours. :) – Edward Ruchevits Aug 08 '13 at 16:31
  • I am about to do something similar and would love to see your answer in jsfiddle but the jsfiddle page is no longer working :( how can I get the full answer? – m.othman Jul 09 '14 at 11:10
  • @m.othman, Updated the link `http://jsfiddle.net/OmShiv/UDtby/`. Actually I had changed my User name on JSFiddle. – Om Shankar Jul 11 '14 at 06:29