Hi there!

Thanks for conatcting us.

There is no default option to add a hover overlay to the image modal popup addon. But you can use the image text as follows: https://prnt.sc/1x6ih8t This will let your users know about clicking on the image and/or the text.

Another option can be using an interaction on mouse movement. Here is a screenshot for your ease: https://prnt.sc/1x6i5pp

However, we have an image overlay addon separately, there is an option to open it in lightbox, but it will not show any contents then. https://prnt.sc/1x6ivfn

Hope this helps!

Best Regards

Thank you Rashida for the other suggestions. I wonder if there is a way to add CSS to the image model popup to make it behave as an overlay on hover? Has anyone solved for that before?

• Karen

You are welcome.

It requires code customization I guess, so beyound support. But as I have said already, if you enable tilt effect for it, then it will give you a movement on hover. Also the text you can use as 'please click to open' etc...

Moreover, you have the link hover color option as well, that will apply to the icon/image text.

https://prnt.sc/1x6sbd3

https://prnt.sc/1x6scms

Best Regards

I wonder if there is a way to add CSS to the image model popup to make it behave as an overlay on hover?

Hi. Yes, it is possible to do through CSS. But so that it was a beautiful name must be placed inside the image, since the overlay layer applies to both.

Add "modal-overlay" class name to the addon CSS Class field. And use following code (add it to the costom.css file):

.modal-overlay .sppb-modal-selector {
    position: relative;
}
.modal-overlay .sppb-modal-selector::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(234, 163, 27, 0.6);
    z-index: 2;
    opacity: 0;
    transition: opacity .3s;
}
.modal-overlay .sppb-modal-selector .text {
    position: absolute;
    left: 15px;
    bottom: 15px;
}
.modal-overlay .sppb-modal-selector:hover::before {
    opacity: 1;
}

Will looks like this

After all, you should pick up a different font color.

Pavel, this is brilliant. Thank you so much for this! It works perfectly and gives the user a much better experience.

For anyone else looking at this post, I also made one edit to the CSS Pavel posted above so that the text field displays below the image. So instead of

.modal-overlay .sppb-modal-selector .text {
    position: absolute;
    left: 15px;
    bottom: 15px;
}

I used:

.sppb-modal-selector {
    display: inline-grid;
}
.sppb-modal-selector span.text {
  margin-top: 8px;
}

Hi Karen. You are wellcome.

.sppb-modal-selector {
    display: inline-grid;
}
.sppb-modal-selector span.text {
  margin-top: 8px;
}

Do not forget to use your unique class for addon, so that the code would be isolated and did not influence other modal addons that you may want to use in another page, with another appearance.