[Resolved] Adding offset ‘borders’ to images

[CRAIG]

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.

[David]

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

[CRAIG]

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…..

[Leo]

Is there a specific image we should be looking at?

[CRAIG]

The images are the 2 directly above the ‘latest posts’ section

Both images have had the CSS class referred to above added

[Ying]

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 🙂

[CRAIG]

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?

[Ying]

I’ve edited the CSS here:
https://generatepress.com/forums/topic/adding-offset-borders-to-images/#post-1846917

Could you try again?

[CRAIG]

This has worked perfectly! Thank you so much!

[Ying]

You are welcome 🙂

[Author]

Posts