[Resolved] Picture Frame CSS Effect

[Ashley]

Hi Guys,

I’m putting together a site currently and I’ve created an inset border ‘picture frame’ style effect for the images to tie in with their branding.
The CSS I’m using for this is currently:

.entry-content img, .magic-mirror .elementor-row{
outline: 4px solid #FCFAFA;
outline-offset: -10px;
}

What I’m trying to apply this effect to is any image excluding logo, icons etc. as well as background images applied to Elementor sections or columns.

I’ve managed to do this but you’ll notice on the homepage of this site there are some images (the course links about a 1/4 of the way down that this effect doesn’t apply to.

I was using “.elementor-element-populated” as the selector for columns and rows but this applied the effect to any column within a row causing a ‘doubled up’ effect.

Any ideas?

[Leo]

Hi there,

Have you checked with Elementor’s support since you are trying to modify their content?

Let me know 🙂

[Ashley]

Tumbleweed is blowing in the land of Elementor support!

Regardless, I had another coffee and worked out a workaround:

.elementor-row > * .elementor-column-wrap{
outline: none !important;
}

[Leo]

Glad you figured out 🙂

[Author]

Posts