[Resolved] Offset Image Border

[Brandi]

I am trying give all images within the page of my site a border similar to the thumbnails here. Not looking for animation but borders.

I have tried the following so far:

#page img {
border-top: solid 10px #000;
border-left: solid 10px #000;
border-right: solid 10px #000;
}
*The issue is the side borders go all the way to the bottom.

#page img:before {
top: -20px;
left: 20px;
right: 20px;
bottom: 20px;
background-color: #000000;
}
#page img:before {
position: absolute;
display: block;
content: ”;
}
*This didn’t produce any borders.

[Ying]

Hi Brandi,

I don’t think pseudo element works with imgelement so far, you could try the below css but using a higher level of class, eg: div.

.page div {
    position: relative;
}
.page div:before {
    content: "";
    background: #000;
    position: absolute;
    top: -10px;
    left: -10px;
    height: 100%;
    width: calc(100% + 20px);
    z-index: -1; 
}

Let me know 🙂

[Brandi]

That gave me a black box in the upper right corner of the site but nothing for the images.

Site info has been added.

Please let me know if you have any other ideas.

[Ying]

Sorry I didn’t clarify that the div in the CSS is just for example.

I checked your site, here’s the exact css that you could use:

.wp-block-image:before {
    content: "";
    background: #e6f1f5;
    position: absolute;
    top: -20px;
    left: -20px;
    height: 100%;
    width: calc(100% + 40px);
    z-index: -1;
}
.wp-block-image {
    position: relative;
    z-index: 1;
} 

Let me know 🙂

[Brandi]

Awesome! Thank you!!

[Ying]

No problem 🙂

[Author]

Posts