Displaying a border image over another image

So this is what i'm sitting at

.inner-image{
    position: absolute;
    right: 0px;
    z-index: 0;
}
.image-border{
    z-index: 1;
}

.inner-image{
    position: absolute;
    right: 0px;
    z-index: 0;
}
.image-border{
    z-index: 1;
}

<div class="product" id="keyboard">
            <img src="../assets/product-border.png" alt="border" class = "image-border" >
            <img src="../assets/keyboard.png" alt="keyboard" class = "inner-image">
            <div class="title">Headset</div>
        </div>

<div class="product" id="keyboard">
            <img src="../assets/product-border.png" alt="border" class = "image-border" >
            <img src="../assets/keyboard.png" alt="keyboard" class = "inner-image">
            <div class="title">Headset</div>
        </div>

not sure how to achieve this kind of an effect note: the border is a png image

11 Replies

NeedForSleepx30OP•8mo ago

this is what i'm trying to achieve the border is present underneath the image seen

MarkBoots•8mo ago

probably doing the whole thing in svg is the easiest. but with a lot of calcs you can do something like this in css https://codepen.io/MarkBoots/pen/bGJJpMj

Mark Boots

CodePen

bGJJpMj

...

MarkBoots•8mo ago

🤭 ohw oops, now i see the note that you have the border as an image. can you share it?

NeedForSleepx30OP•8mo ago

oh my god witchcraft

NeedForSleepx30OP•8mo ago

this is insane wow

MarkBoots•8mo ago

you would need to have the white part transparent as well. and probably only the image shape, not the part where the text goes. but am not sure if that is the easiest to do. you will get stuck when you need to scale things. what if the text gets larger / screen smaller etc. there will be not enough room for the text and scaling a png will cause some pixelation. so yea, svg or css imo is better

NeedForSleepx30OP•8mo ago

ahhh i see i'll do that then i'll take my time dissecting what you did tho thanks a lot!

MarkBoots•8mo ago

good luck 😉 make sure you copy or fork the pen. I can't guarantee i will keep it for long on my codepen

NeedForSleepx30OP•8mo ago

yep done you can delete it now thanks

Mel•8mo ago

Thanks

Gaming

Programming

Displaying a border image over another image