make image caption follow mouse!

arminunruh

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":

.no-touchdevice .col.type-img .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.

alvarodoze

🙏🙏🙏🙏🙏🙏

arminunruh

next lay theme update will include a setting in customize → project thumbnails → project title

to Have project titles also follow the mouse on non touch devices

Lay Theme Forum

make image caption follow mouse!

Online Users