JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<div class="hover-image">
  <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" style="width:100%;" alt="super massage" />
  <h3 class="h3sidebarimagesupermsg">
    <span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span>
  </h3>
</div>
<div class="hover-image">
  <a href="http://www.google.com" title="Workshop for couples">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" style="width:100%;" alt="Workshop for couples">
    <h3 class="h3sidebarimage">
      <span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span>
    </h3>
  </a>
</div>

CSS

.hover-image{
  position: relative;
  width: 100%; /* for IE 6 */
}

.hover-image:hover h3{
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

.hover-image h3{
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  color: white; 
  font: bold 22px/45px Helvetica, Sans-Serif; 
  letter-spacing: 2px;  
  background: rgb(0, 0, 0); /* fallback color */
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
}

.hover-image h3 .spacer{
  padding: 0 5px;
}