JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="parent">
  <img src="http://topus.biz/wp-content/uploads/2016/02/64dde13dcddd31c2b95fea7ff875b76f0ac503f3b8ebbcc7bd24c598b27dd52c.jpg" />
  <div class="is-image-hover" data-is="image-hover" data-size="200" data-gap="10"></div>
</div>

SCSS

.parent {
  position: relative;
  overflow: hidden;
  float: left;
}

.is-image-hover {
  display: block;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  i {
    display: block;
    position: absolute;
    opacity: 0;
    transition-property: opacity, transform;
    will-change: transform;
  }
  &:hover {
    i {
      opacity: 1;
      transform: rotate(45deg) scale(1.01) !important;
    }
  }
}

JavaScript

var imageHover = function($module) {
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }

  var generateHover = function() {
    var template = '';

    var mx = $module.width();
    var my = $module.height();

    var size = $module.data().size || mx / 6;
    var gap = $module.data().gap || size / 3.37;

    var opacityMin = $module.data().opacitymin || 1;
    var opacityMax = $module.data().opacity || 80;

    var durationMin = $module.data().durationmin || 100;
    var durationMax = $module.data().duration || 1000;

    var shift = (size / 2);
    var leftShift, row = 0;

    for (var i = -shift; i < my; i += (size / 2)) {
      row++;
      if (row % 2) {
        leftShift = (size / 2);
      } else {
        leftShift = 0;
      }
      for (var j = -shift; j < mx; j += size) {
        var bgOpacity = getRandom(opacityMin, opacityMax);
        var delay = 0;
        var duration = getRandom(durationMin, durationMax);
        var scale = getRandom(5, 10);
        var styleSize = (size - gap);
        template += '<i style="transform:scale(' + (scale / 10) + ') rotate(45deg);width:' + styleSize + 'px;height:' + styleSize + 'px;transition-delay:' + delay + 'ms;transition-duration:' + duration + 'ms;background:rgba(255,255,255,' + (bgOpacity / 100) + ');top:' + i + 'px;left:' + (j + leftShift) + 'px;"></i>';
      }
    }
		
    $module.html(template);
  };

  $(window).on('load', generateHover);

};

imageHover($('.is-image-hover'));