JSFiddle - React, Tailwind, and code Playground

by Harm Zeinstra

HTML

<div class="column">
  <div class="overlay">
    <p>
      Ik ben wat test tekst!
    </p>
  </div>
</div>

CSS

.column {
  height: 300px;
  width: 300px;
  background: black;
  position: relative;
}

.overlay {
  background: #ddd;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.overlay {
    opacity: 0;       
    transition: opacity .25s linear; /* vendorless fallback */
    -o-transition: opacity .25s linear; /* opera */
    -ms-transition: opacity .25s linear; /* IE 10 */
    -moz-transition: opacity .25s linear; /* Firefox */
    -webkit-transition: opacity .25s linear; /*safari and chrome */
}

.overlay:hover {
    opacity: .75;
    cursor: pointer;
}