How to make image clickable - Forum | JoomShaper
Solved SP Page Builder

How to make image clickable

Asked by Remco 5 years ago Last activity 5 years ago

Hi,

Because there are still too many improvements needed to SP Booking before I can use it, I am recreating the layout with SP Page Builder.

Now I have a page on which all group trips (groepsreizen) will be displayed (https://moventa.nl/site/groepsreizen) here is a photo that zooms in when you hover over it. A title with hyperlink, a button 'Bekijk reis' with hyperlink, but now I want the photo also to be referred to the relevant page by means of a hyperlink (https://moventa.nl/site/groepsreizen/parijs).

How do I get this done?
A very rapid response is desirable.

Regards,
Remco

Accepted answer

Marked as the solution
Remco Asked this
5 years ago

Thanks, this css solved my issue.

.sppb-addon.sppb-addon-single-image.sppb-text-center.zoom {
    overflow: hidden;
}
.zoom img.sppb-img-responsive {
    transition: transform .5s, filter 1.5s ease-in-out;
}
.zoom img.sppb-img-responsive:hover {
    filter: grayscale(0);
    transform: scale(1.4);
}
.zoom .sppb-img-responsive {
    object-fit: cover;
}

14 more replies

Oldest first Newest first Most helpful
Toufiq Senior Staff
5 years ago

Hi there,

Thanks for contacting us. You have used the SP Easy Gallery for the gallery. In this extension, there is no option to use the hyperlink.

-Thanks

Toufiq Senior Staff
5 years ago

The image overlay addon doesn't have the option to add a link behind the image. You can use the image addon or featurebox addon. Thanks

Remco Asked this
5 years ago

But i can't use the Image Animation like 'Zoom In' with the image addon, can I?
That's why i chose the image overlay addon.

So, how can i use image addon with animation 'zoom in'?

Toufiq Senior Staff
5 years ago

Add this css code inside the custom.css file and add zoom class in your image addon css class field.

https://prnt.sc/13fuvfn

.zoom {
  transition: transform .2s;

}

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}
Toufiq Senior Staff
5 years ago

Add this css code inside the custom.css file instead of previous css code. 

.sppb-addon.sppb-addon-single-image.sppb-text-center.zoom {
    overflow: hidden;
}
.zoom img.sppb-img-responsive {
    transition: transform .5s, filter 1.5s ease-in-out;
}
.zoom img.sppb-img-responsive:hover {
    filter: grayscale(0);
    transform: scale(1.1);
}
Remco Asked this
5 years ago

We are almost there. See https://www.moventa.nl/site/groepsreizen.
If you compare the image from the first column with the rest, you will see that the photo is now slightly stretched. It is not scaled proportionally. How can I fix that?

Regards,
Remco

Toufiq Senior Staff
5 years ago

Hi there, Please increase the scale parameter. 

.zoom img.sppb-img-responsive:hover {
    filter: grayscale(0);
    transform: scale(1.1);
}

to 

.zoom img.sppb-img-responsive:hover {
    filter: grayscale(0);
    transform: scale(1.4);
}

-Thanks

Remco Asked this
5 years ago

Hi,

This only changes how far it is zoomed in, but not that the image is stretched (proportions are no longer correct). The Eiffel Tower is suddenly squeezed.

Regards,
Remco

Log in to reply.