[Resolved] Box Shadow deforms box size

Home Forums Support [Resolved] Box Shadow deforms box size

Home Forums Support Box Shadow deforms box size

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1640939
    troyw

    Hey team,
    I have tried several CSS codes to create a Box Shadow effect on my images, but regardless of which CSS I use, the result is always the same.
    Once I add the Additional CSS class, I get a white box appear outside of my image and a shadow outside of this? I’ve never had this happen before, so can’t understand why it is happening now. If you visit the home page, you will see how the images have this white box around the, which I cannot seem to remove.

    Thanks

    #1641012
    Elvin
    Staff
    Customer Support

    Hi,

    I’ve checked your site and I think the CSS should be a bit more specific:

    Say, instead of using the selector .box-shadow, you can try using .box-shadow img instead.

    Example:

    .box-shadow img {
        box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 5.3px rgb(0 0 0 / 5%), 0 12.5px 10px rgb(0 0 0 / 6%), 0 22.3px 17.9px rgb(0 0 0 / 7%), 0 41.8px 33.4px rgb(0 0 0 / 9%), 0 100px 80px rgb(0 0 0 / 12%);
        min-height: auto;
        width: auto;
        margin: auto;
        background: white;
        border-radius: 5px;
    }

    This is how it would look using .box-shadow img here: https://share.getcloudapp.com/z8uP7lAQ

    #1641018
    troyw

    Ah ha, perfect Elvin, thanks so much.

    #1641132
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. 🙂

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