JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div id="newTech">
    <div class="grid full">
        <div class="grid half box google-cardboard">
            <div class="inner">
                <img src="https://placehold.it/100x100" />
            </div>
        </div>
        <div class="grid half box oculus-rift">
            <div class="inner">
                <img src="https://placehold.it/100x100" />
            </div>
        </div>
    </div>
    <div class="grid full">
        <div class="grid half box ibeacon">
            <div class="inner">
                <img src="https://placehold.it/100x100" />
            </div>
        </div>
        <div class="grid half box 3d-printing">
            <div class="inner">
                <img src="https://placehold.it/100x100" />
            </div>
        </div>
    </div>
</div>

CSS

.box {
    box-sizing:border-box;
    padding:10px;
}
.box .inner {
    border:1px solid #fff;
    min-height:170px;
    position:relative;
}
body {
    background-color:#343434;
    font-size:0;
}
.grid {
    display:inline-block;
    box-sizing:border-box;
    vertical-align: top
}
.grid.half {
    width:50%;
}
.grid.one-third {
    width:33.3%
}
.grid.two-thirds {
    width:66.6%
}
.grid.full {
    width:100%;
}
.wrapper {
    width:90%;
    max-width:1200px
}

JavaScript

$(document).ready(function () {
    var counter = 0;
    var myinterval;
    var current;
    
    $(".box .inner").on("mouseenter", function () {

        var $this = $(this);
        
        clearInterval(myinterval);
        
        myinterval = setInterval(function() {
            _boxes($this) 
        }, 100);

    }).on('mouseleave', function () {

        clearInterval(myinterval);

    });


    function _boxes($this) {

        var randomTop = Math.floor(Math.random() * 21) - 10;
        randomTop = randomTop + 'px';

        var randomLeft = Math.floor(Math.random() * 21) - 10;
        randomLeft = randomLeft + 'px';

        // Create unique id
        counter++;
       var  current = "created-" + counter;

        // Create the div (max of ten)
        $this.append("<div id='" + current + "' style='display:none;border:1px solid #fff;width:100%;min-height:170px;position:absolute;top:" + randomTop + ";left:" + randomLeft + ";'></div>");
        $('#' + current).fadeIn('fast');

        // Destroy the div after a set time
        setTimeout(function () {
            // destroy
            $('#' + current).fadeOut('fast');
            $('#' + current).remove();

        }, 500);

    }
});