JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<div class="sidebarimagesupermsg"><img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="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="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="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

.sidebarimage, .sidebarimagesupermsg { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.h3sidebarimage, .h3sidebarimagesupermsg { 
   position: absolute; 
   top: 20px; 
   left: 0; 
   width: 100%; 
}
.h3sidebarimage span, .h3sidebarimagesupermsg span { 
   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; 
}
.h3sidebarimage span.spacer, .h3sidebarimagesupermsg span.spacer {
   padding:0 5px;
}
.sidebarimage:hover .h3sidebarimage, .sidebarimagesupermsg:hover .h3sidebarimagesupermsg  {
      visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}