enter this in lay options → custom css & html → custom <head> content:
<script>
var $caption;
jQuery(document).on('mouseenter', '.col.type-img', function(e){
//console.log(e);
$caption = jQuery(e.currentTarget).find('.caption');
})
jQuery(document).on('mouseleave', '.col.type-img', function(){
console.log('mouseleave');
$caption.css('display', 'none');
$caption = null;
})
var offset = 10;
jQuery(document).on('mousemove', '.col.type-img', function(e){
console.log('mousemove');
if($caption != null){
$caption.css({'display': 'block', 'top': e.clientY + offset, 'left': e.clientX + offset});
}
})
</script>
enter this in "custom css for desktop":
.caption{
position: fixed;
display: none;
z-index: 99;
}
now in the gridder, add an image in your layout, select it and click "edit caption" button.
add a caption. now on your website the caption will follow your mouse.
