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

Hi Toufiq,

I am not talking about SP Image Gallery. I want the images on https://moventa.nl/site/groepsreizen to link to https://moventa.nl/site/groepsreizen/parijs. Now only the title and button are clickable, i want the image also to be clickable.

Regards, Remco

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

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'?

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); 
}

See https://www.moventa.nl/site/groepsreizen

How can i make it exact as the rest? Square instead of rectangle. The image should zoom within the square. You know what i mean?

Regards, Remco

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);
}

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

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

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

Hi. Try this

.zoom .sppb-img-responsive {
    object-fit: cover;
}

Does solve your issue? Please let me know. Thanks

Yes, see 'accepted answer' above. Multiple posts combined.

Thanks