JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<h2>Hover over the first image...</h2>

<div class="parent">
    <div class="child"></div>
</div>

<h2>This is the image that is used above...</h2>
<p>
  The images are simply stacked on top of each other. Javascript reveals the child element with the blurred part of the image.
</p>
<img src="https://i.stack.imgur.com/zqIYo.png" alt="" class="original-img">

<h2>Blurred section with added color...</h2>

<div class="parent static-example">
    <div class="child">
        <div class="text">
          Lorem ipsum dolor sit amet...
        </div>
    </div>
</div>