Archived topic
Adding offset 'borders' to images
9 replies · Started by CRAIG on July 6, 2021
Hi Folks,
I am trying to add a couple of 'offset' borders to some of the images on my site to add some of my brand colours to the images.
I have added a link (privately) to a website which has this effect on the last 2 main images on their homepage.
I have tried to inspect the CSS but to be honest I'm not too sure what it means.
Could you suggest a way that I could achieve a similar effect?
I was going to upload the image into photoshop and try to add the effects that way, but I get the feeling there's probably an easy way to do this within generate press leaving the original image untouched.
Thanks in advance for any help you can provide.
Hi there,
i converted that sites CSS to this:
.image-borders img {
position: relative;
}
.image-borders img:before {
content: "";
height: calc(100% + 5px);
width: calc(100% + 5px);
border: 4px solid #9191f8;
position: absolute;
z-index: 1;
top: -15px;
right: -15px;
}
.image-borders img:after {
content: "";
height: 100%;
width: 100%;
border: 2px solid #70f1b4;
position: absolute;
top: -25px;
right: -25px;
}With that added - give the Image Block an Additional CSS Class of: image-borders
Hi David,
Thanks for taking the time to do this.
I have added the CSS and given the image block the class as suggested via Advanced > Additional CSS class(es)
So far it doesn't seem to be displaying anything.
I originally thought it might be that there weren't any colours but I can see you've added the HEX codes from the reference site, and so I was expecting to see them show up
Hmm.....
Is there a specific image we should be looking at?
The images are the 2 directly above the 'latest posts' section
Both images have had the CSS class referred to above added
Hi Craig,
Try to replace David's CSS with this:
.image-borders{
position: relative;
}
.image-borders:before {
content: "";
height: calc(100% + 5px);
width: calc(100% + 5px);
border: 4px solid #9191f8;
position: absolute;
z-index: 1;
top: -15px;
right: -15px;
}
.image-borders:after {
content: "";
height: 100%;
width: 100%;
border: 2px solid #70f1b4;
position: absolute;
top: -25px;
right: -25px;
}
.image-borders img {
z-index: 2;
position: relative;
}Let me know if it works :)
This has worked well
The only issue is that the borders are "on top" of the image
Is there a way I can set them to be "behind" the image, so that the only parts of the border which show are those which are above and to the right of the image?
I've edited the CSS here:
https://generatepress.com/forums/topic/adding-offset-borders-to-images/#post-1846917
Could you try again?
This has worked perfectly! Thank you so much!
You are welcome :)
