JSFiddle - React, Tailwind, and code Playground

imageHover

by Jennifer Perrin

HTML

<div id="imageset">
    <div id="upperLeft" class="ui-item"></div>
    <div id="upperRight" class="ui-item"></div>
    <div id="lower" class="ui-item"></div>
</div>

CSS

body { padding:20px; background:#444; }

#imageset {
    width:400px;
    height:400px;
    background:url('http://placekitten.com/400');
    margin:0 auto;
    -webkit-box-shadow:0 2px 10px rgba(0, 0, 0, 0.2) inset, 0 1px 0 #fff;
    -moz-box-shadow:0 2px 10px rgba(0, 0, 0, 0.2) inset, 0 1px 0 #fff;
    box-shadow:0 2px 10px rgba(0, 0, 0, 0.2) inset, 0 1px 0 #fff;
    position:relative;
}

.ui-item { background:rgba(0,0,0,0.4); }

#lower {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:75px;
}

#upperRight {
    width:100px;
    height:75px;
    position:absolute;
    top:10px;
    right:10px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

#upperLeft {
    width:100px;
    height:75px;
    position:absolute;
    top:10px;
    left:10px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

JavaScript

var imageHover = {

    defaults: {
        container: '#imageset',
        selector: '.ui-item',
        delay: 5000,
        fadein: 1000,
        fadeOut: 1000,
        hideCursor: true,
        hideInitially: true
    },
    settings: {},
    animatingIn: false,
    fadeOutModules: false,
    x: 0,
    y: 0,

    init: function(opts) {
        imageHover.settings = $.extend({}, imageHover.defaults, opts);
        if (imageHover.settings.hideInitially) {
            $(imageHover.settings.selector).css('opacity', 0);
        }
        $(document).on('mousemove', imageHover.settings.container, imageHover.listener);

        $('<style type="text/css">.no-cursor{cursor:none}</style>').appendTo('head');
    },

    listener: function(e) {

        clearTimeout(imageHover.fadeOutModules);

        if (imageHover.x != e.pageX && imageHover.y != e.pageY) {
            imageHover.x = e.pageX;
            imageHover.y = e.pageY;
            if (imageHover.settings.hideCursor) {
                jQuery(imageHover.settings.container).removeClass('no-cursor');
            }
            if (!imageHover.animatingIn) {
                imageHover.animatingIn = true;
                var curOpacity = jQuery(imageHover.settings.selector + ':first').css('opacity');
                if (curOpacity != 1) {

                    jQuery(imageHover.settings.selector).fadeTo(imageHover.settings.fadeIn, 1, function() {
                        imageHover.animatingIn = false;
                    });
                }
            }
        }
        imageHover.fadeOutModules = setTimeout(function() {

            jQuery(imageHover.settings.selector).fadeTo(imageHover.settings.fadeIn, 0, function() {
                imageHover.fadeOutModules = false;
                imageHover.animatingIn = false;
                if (imageHover.settings.hideCursor) {
                    jQuery(imageHover.settings.container).addClass('no-cursor');
                }
            });
        },...