Adding a drop shadow on image issues

Hi,

I have added a drop shadow and a margin to a classic image using the code:

margin-top: -40px; box-shadow: 5px 5px 10px rgba(61, 61, 61, 0.51);

This works fine until i select to add a link to the image and then the shadow moves and applies to the column instead.

Any ideas on how to stop this from happening as i need to add a link to the image but keep the drop shadow.

thanks,

Chris

I have found that this seems to be a bug with the classic element. The V2 image element it works fine on.

Thanks,

Chris

Sorry - on this note, i am actually trying to open a pop up from an image but i cant get it working as it simply opens a blank webpage. Is it possible to open a popup using a pop up shortcode by clicking on a v2 image?

thanks.

Hey Chris,

I tried to replicate what you’ve described but the code you posted works on my end. Please watch my findings at https://youtu.be/uT-SSAOj-V4

This leads me to conclude that there might be something incorrectly setup on your end. Would you mind saving your page as a template and load the template in a test page then remove all the elements except the image with box shadow?

Regarding the popup, you can try using ConvertPlus and use the display with custom Class option and add the custom class to your image so it could popup a modal. Please see the screencast above.

Alternatively, you can use a Content Area Modal element. That element has a Graphic only option so you could use that as an image modal. See https://youtu.be/qIStTm5xPMA

Hope that helps.

Thanks @christian_y I will give this a try :slight_smile:

Glad to hear that. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.