Tagged: image border shadow
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?