KPC
Kevin Powell - CommunityNeedForSleepx30

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
No description
N
NeedForSleepx30•17d ago
this is what i'm trying to achieve the border is present underneath the image seen
No description
M
MarkBoots•17d 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
...
M
MarkBoots•17d ago
🤭 ohw oops, now i see the note that you have the border as an image. can you share it?
N
NeedForSleepx30•17d ago
oh my god witchcraft
N
NeedForSleepx30•17d ago
No description
N
NeedForSleepx30•17d ago
this is insane wow
M
MarkBoots•17d 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
N
NeedForSleepx30•17d ago
ahhh i see i'll do that then i'll take my time dissecting what you did tho thanks a lot!
M
MarkBoots•17d ago
good luck 😉 make sure you copy or fork the pen. I can't guarantee i will keep it for long on my codepen
N
NeedForSleepx30•17d ago
yep done you can delete it now thanks
M
Mel•16d ago
Thanks
Want results from more Discord servers?
Add your server
More Posts
Grid Layout Not functioning responsivelyI'm completely lost on how to make this fit in my ```main-message-container``` at all times I've trihtml input behaviouri've been wondering about this for awhile. when your text input starts running out of room the rightget value of sibling aboveHey, if i have a structure like so: ```html <p class="a">...</p> <p class="b">...</p> ``` ```css .a Error I dont understandHI everyone somebody can explain me what is going wrong hereSearch bar jsHow do i get results from my search barCan't figure out how to wrap text under an imageBasically, what I want to achieve is this (1st image): https://prnt.sc/EO_CIn76U9UT The closest I cHow to add stuff off of my sidebarI want to add stuff on the right side of my website but it isnt showing upUsing escaped unicode in contentIs it possible to use escaped unicode in content to get emoji combinations like Phoenix for example,Github blocked push due to secretsIt was right, my `rest.http` file was misspelt in my `gitignore`. But now it's correct and git is Trying to get the cards over each other properlyI want to set the back-card under the front-card with wider and shorter than the front-card, but couOverflow Issuehttps://w5bkz10l-3000.inc1.devtunnels.ms/ I'm trying to find which section is overflowing, tried inpUsing Vite with SCSSSo i was advised to try scss with vite instead of just using node as i was getting errors. What i dAbsolute position with gridI need help to position a text and image inside a grid item which size its 2fr but trying to positiSVGs <use> and not...Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one ofHandling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several realReact + Tailwindcss users? Help with some examples please!I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but Navbar helpi cant get the navbar to go end to end on the pageVS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried everyAdding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax highFlexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution