Add this to the Additional CSS customizer section:
.zoomContainer {
box-shadow: 10px 10px 10px grey;
}
The first two dimensions are the X and Y offsets, the third is the blur radius. adjust as you prefer.
This will likely apply to any image that has the magnifier zoom effect applied. You’ll see the shadow extends slight above the image. This is because the image isn’t entirely filling its container. The image is actually implemented as a background. The shadow is actually applied to the div container and not the image itself. It’s top and height properties apparently need some adjustment. These are likely determined by script, probably belonging to the zoom effect script.
I recommend asking the zoom effect devs how the div container could better fit the image available.
Thanks! If I dump the zoom feature, will it substantially simplify doing a drop shadow? If so, could I trouble you for the code that I’d use for a basic image (i.e., not with the zoom feature enabled)? Thank you again. I really appreciate you taking time to help a stranger.
I’m not sure what the resulting HTML would look like without seeing an actual page without zoom. You could replace the .zoomContainer with img to affect all img tags, but it still wouldn’t work with background images. Ideally there’d be some unique CSS selector combination that’d address only the images you want drop shadows on and not those you don’t.
Part of the problem is the image is implemented as a background. Ideally it’d be a normal foreground image. To achieve the ability to see the image in greater detail, consider some kind of lightbox-like app that opens a bigger image in a modal.
