I created a button that was the same size as the content of the image, made it transparent (removed hover animations) and it essentially works. This way the URL is custom to each image of the slider.
Steps:
- Select Slideshow addon, add CSS class name (ie. hero-click-slider)
- Edit first slideshow item; Add item
- Set that item as a button
- Add URL
- Make Label blank
- Set Color, hover color, background, background hover, border color, and hover border color to fully transparent
- Set style padding to cover the majority of the image (I used 600px for all )
- I was getting a green overlay so I added Custom CSS (Page Settings) to eliminate any of those for the whole slideshow addon.
/* Turn off hover overlay anywhere inside the hero slider */
.hero-click-slider:hover,
.hero-click-slider:hover * {
background-color: transparent !important;
filter: none !important;
box-shadow: none !important;
}
/* In case SP Page Builder uses overlay pseudo-elements */
.hero-click-slider:hover::before,
.hero-click-slider:hover::after,
.hero-click-slider:hover *::before,
.hero-click-slider:hover *::after {
background-color: transparent !important;
opacity: 0 !important;
filter: none !important;
}
This did it. Now the majority of my hero image is clickable.
This might turnout clunky later, plus, I imagine the padding will need to be different when displaying for different screens.