JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<h2>Hover over the first image...</h2>
<p>
  Javascript reveals the child element with the blurred part of the image.
</p>
<div class="parent">
    <div class="child"></div>
</div>

<h2>This is the image that is used above...</h2>
<p>
  .parent shows the left side of the image and .child shows the right side of the image and they are simply stacked stacked on top of each other. There's yet another example below with just a static blurred section in the middle. 
</p>
<img src="https://i.stack.imgur.com/zqIYo.png" alt="" class="original-img">

<h2>Blurred section with added color...</h2>
<p>
  The background position is shifted down so it matches what's below. Hover over it to see an example where the blurred BG in child is shifted, more or less ruining the blurred effect.
</p>
<div class="parent static-example">
    <div class="child">
        <div class="text">
          Lorem ipsum dolor sit amet...
        </div>
    </div>
</div>

CSS

.parent,
.child {
    width: 500px;
    height: 256px;
    overflow: hidden;
    background: url('https://i.stack.imgur.com/zqIYo.png') no-repeat top left;
}

.child {
    height: 0px;
    background-position: top right;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
}

/* - - - - STATIC EXAMPLE - - - - - */
.static-example .child {
  box-shadow: 0 4px 35px rgba(0,0,0, .6);
  position: relative;
  z-index: 0;
  margin-top: 100px;
  height: 100px;
  background-position: -500px -100px;
  transition: background-position 2s linear;
}
.static-example:hover .child {
  background-position: -500px -150px;
}
.static-example .child:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #8300ff;
  opacity: .15;  
  animation: color-cycle 15s infinite;
}
@keyframes color-cycle {
    0%   { background: #8300ff; }
    20%  { background: #005dff; }
    40%  { background: #00f6ff; }
    60%  { background: #00ff64; }
    80%  { background: #fdff00; }
    100%  { background: #8300ff; }
}
.static-example .text {
  position: relative;
  top: 35px;
  z-index: 2;
  color: #fff;
  font-size: 25px;
  font-weight: 100;
  font-family: "Helvetica Neue", Helvetica, Arial;
  text-align: center;
}

JavaScript

$('.parent').not('.static-example').on("mousemove", function( e ) {

    var parent = $(this),
        child = parent.find('.child');
        eventPos = ( e.pageY - parent.offset().top )
    
    child.height( eventPos );

});