Here you go!
Put this in your custom js:
<script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ jQuery.fn.swinger = function () { return this.each(function () { var $container = jQuery(this); $container.css({ "position": "relative" }); var $images = $container.find("img"); $images.css({ "position": "absolute", "top": "0%", "left": "0%", "width": "100%" }); var $middleImage = jQuery($images[Math.floor($images.length / 2)]); $middleImage.css({ "z-index": "2", "position": "relative" }); var columnsCount = $images.length; $images.each((i, img) => { var left = `${100 / columnsCount * i}%`; var width = `${100 / columnsCount}%`; var $column = jQuery(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`); jQuery(img).after($column); $column.hover(() => { $images.css({ "z-index": "1", "position": "absolute" }); jQuery(img).css({ "z-index": "2", "position": "relative" }); }); }) }); } }); </script> <script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ jQuery(".img-area").swinger(); }); </script>Then add your images via "+More" > +HTML" in your laygridder. Give the row the class "img-area". Should work like this.