JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<div id="container">
  <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="200" height="200" />
  <div class="below-content">
      <span class="heading">Intro to HTML5</span><br/>
      <span>St Paul, MN</span><br/>
    <p>
      This fake course on the amazing HTML5 will never take place. Held at a place of your choice.
    </p>
    <a href="#">Sign Up Today!</a>
  </div>
</div>

CSS

div#container {
  font-family: serif;
  margin: 200px;
  height: 250px;
  width: 250px;
  position: relative;
  overflow: hidden;
  background-color: white;
}

img {
  position: absolute;
  top: 30px;
  left: 30px;
  margin: 0 auto;
}

#container:hover div.below-content{
    position: absolute; 
    top: 0px;
    cursor: pointer;
    background-color: #ff6600!important;

}
div.below-content {
  padding: 0 10px 10px 10px;
  color: white;
  width: auto;
  height: inherit;
  position: absolute;
  top: 200px;
  background: rgba(0,0,0,0.15);
-webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -moz-transition: all 0.5s ease 0s;
  transition: all 0.5s linear;
}

.below-content a {
  color: white;
  text-decoration: underline;
}
.below-content span.heading { 
font-size: 1.5em;
}