JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<!-- Uses background color to fade color from behind. -->
<div id="background">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
    <div class="inner">
        <h3>
            Example header here
        </h3>
        <p>
            Example paragraph here
        </p>
    </div>
</div>
    
<!-- Uses empty span to overlay color. -->
<div id="overlay">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
    <span>
        <h3>
            Example header here
        </h3>
        <p>
            Example paragraph here
        </p>
    </span>
<div>

CSS

div { position: relative; float: left; }
img { display: block; }
h3, p {color:#fff;}

#background { background:rgba(38,171,227,1); }
#background img { opacity: 0.2; }

.inner {
    left: 0;
    position: absolute;
    top: 0;
}





#overlay span {
    background: #26abe3;
    bottom: 0;
    display: block;
    left: 0;
    opacity: .8;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

#overlay:hover span { opacity: 0; }
.span2 {
    position:absolute;
    z-index:999;
}