[Resolved] Offset Image Border

Home Forums Support [Resolved] Offset Image Border

Home Forums Support Offset Image Border

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1645827
    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.

    #1645998
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1646007
    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.

    #1646011
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1646014
    Brandi

    Awesome! Thank you!!

    #1646015
    Ying
    Staff
    Customer Support

    No problem πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.