Image Overlay Addons - The Whole Image Backgound Area Clickable and Hyperlinked - Forum | JoomShaper
Solved SP Page Builder

Image Overlay Addons - The Whole Image Backgound Area Clickable and Hyperlinked

Asked by Mohammed 4 years ago Last activity 1 year ago

Hi There,

Im using Joomlshaper Empire Templte Joomla3 v.2.1

How to Make Image Overlay Addons in theSP Page Builder the Whole Image Area Clickable, now only the Below title is clickable, I want also to give hyperlink to the back image.



tp://)

Accepted answer

Marked as the solution
Pavel
4 years ago · edited

Hi Mohammed.

Delete link from title, use link in button instead.

Add your own class name to addon's CSS Class field, and use following css code:

.your-class .overlay-image-title {
    position: static;
}
.your-class .overlay-image-button-wrap,
.your-class .overlay-image-button-wrap a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.your-class .overlay-image-button-wrap {
    margin: 0 !important;
    transform: none !important;
}
.your-class .overlay-image-button-wrap a {
    background: transparent !important;
    font-size: 0 !important;
}

11 more replies

Oldest first Newest first Most helpful
Ariba Staff
4 years ago

Hello

Thank you for your query & for sharing the screenshots. Could you kindly provide your site url, please?

Mehtaz Afsana Borsha Staff
4 years ago

Hi

Thanks for contacting us. Could you please give me your site URL so that I can check?

-Regards.

Mohammed Asked this
4 years ago

Any luck with the Question Above !!

Ariba Staff
4 years ago · edited

Hello Mohammed

You have to make changes in the code in the following file in order to make the whole image area clickable, as you want.

your_template\components\com_sppagebuilder\addons\image_overlay\site.php (after line 86)

But this will require customization which we cannot provide, as per our Support Policy.

Mohammed Asked this
4 years ago

Thanks alot Dear Pavel, you are my hero.
Well done, it is working perfectly as you said.

Jesper
1 year ago

Hi Pavel
I have tried your custom css above, but I can not get it to work. Has something changed in the newer versions of SPPB?
I really need the image in imageoverlay to be clickable

Pavel
1 year ago · edited

Hi Jesper.

Nothing has changed. It still works.

To get it works you need to configure the button and add your class name.


Jean-Pierre OBRADO
1 year ago · edited

Hello Pavel, thank you for your help. Your solution works very well on laptop but it doesn't on iphone and ipad. The button is visible on both. Do you have an idea ?

I found a solution : when you paste css in sppb page settings / page css it works.

Thank you again !

Log in to reply.