I got it to work with the help of a friendly dev 🙂
It’s a bit messy in the gridder since you need to paste classes and images in the code-view text-editor. I’ll share some code but you may need to know a fair amount about CSS, HTML and jQuery to alter it for your needs:
Custom HTML at top:
<script>
// Hover Folio
function hover_folio() {
var wrapper = $('.hoverFolio');
if (!wrapper[0] || wrapper[0].hoverFolio) {
return;
}
wrapper[0].hoverFolio = true;
var images = wrapper.find(".hoverFolio-image");
var links = wrapper.find(".hoverFolio-link");
var currentImage;
links.each(function (index) {
$(this).on("mouseenter", function () {
if (currentImage) {
currentImage.hide();
}
currentImage = images.eq(index);
if (currentImage) {
currentImage.show();
}
});
});
links.on("mouseleave", function () {
if (currentImage) {
currentImage.hide();
}
});
}
$(document).ready(function() {
hover_folio();
// Every time a new page is shown, try to initialize the hoverFolio effect
window.laytheme.on('newpageshown', hover_folio)
});
}(jQuery))
</script>
Custom CSS:
.hoverFolio {
/*basic styling for your text object*/
margin: auto !important;
}
.hoverFolio-links {
/*that’s the wrapper for the links which also defines the image height in relation to your text block*/
position: relative;
z-index: 1;
padding: 5vw 0;
}
.hoverFolio .hoverFolio-images img.hoverFolio-image {
/*that’s your image positioning*/
position: absolute;
object-fit: contain;
width: auto;
height: 100%;
top: 0;
left: 50%;
bottom: 0;
transform: translateX(-50%);
display: none;
}
Hover golio (gridder Content):
Paste into code-view of the gridder Element
<p class="hoverFolio-links">
<a class="hoverFolio-link" href="https://linktosomewhere.com">Lorem</a>,
<a class="hoverFolio-link" href="https://linktosomewhere.com">Ipsum</a>,
<a class="hoverFolio-link" href="https://linktosomewhere.com">Dolor</a>,
<a class="hoverFolio-link" href="https://linktosomewhere.com">Sit</a>,
<a class="hoverFolio-link" href="https://linktosomewhere.com">Amet</a>,
</p>
<div class="hoverFolio-images">
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
<img class="hoverFolio-image" src="https://sourcetoyourimage.com"/>
</div>
}
I hope this helps!
Nonetheless this would be super nice to have as a feature or plugin in the future!
It might make sense to combine it with the background positioning thing I described over here
PS: If someone is able to make this a bit cleaner, or something I did doesn’t make much sense 👉 Feel free to paste some changes/corrections!