Trying to create the same border and shadow on an image as on a button

I’m trying to put the same border and shadow on the image as i put on the button below.

I’ve put a Lockable Custom CSS Class ‘blokje’ in the image as I want to save it as a template.
I’ve put custom CSS in the Quick CSS. The border works but the shadow doesn’t.

.blokje img {
border: 1px solid #005999;
padding: 40px;
box-shadow: 1px 1px 0px 0px #005999;
}

I’ve inspected the CSS result and the properties seem to get overwritten.

.avia-image-container.av-m4zpvax3-7f0e8c97aa55acf32e454c29d2832a05 img.avia_image {
  box-shadow: none;
}
.avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap {
  transition: all 0.7s;
}
.blokje img {
  border: 1px solid #005999;
  padding: 40px;
  box-shadow: 1px 1px 0px 0px #005999;
}

When I change the ‘none’ in the box-schadow to ‘1px 1px 0px 0px #005999’, I get the result I want.

I tried to put the following code in Quick CSS but no success:

.avia-image-container.av-m4zpvax3-7f0e8c97aa55acf32e454c29d2832a05 img.avia_image {
  box-shadow: none;
}

All these test where with the box shadow property of the image set to ‘No shadow’

I also tried them with the settings set to ‘outside’ and then it gets overwritten by the following code:

.avia-image-container.av-m4zpvax3-f7f87307d7c5ae1ae484872a008028bd img.avia_image {
  box-shadow: 0 0 1px 0;
}

How can I get this to work?

• This topic was modified 9 hours, 45 minutes ago by Dirk Messiaen. Reason: Code was not showing as code
• This topic was modified 9 hours, 44 minutes ago by Dirk Messiaen.