Archived topic
Offset Image Border
5 replies · Started by Brandi on February 4, 2021
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.
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 :)
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.
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 :)
Awesome! Thank you!!
No problem :)
