JSFiddle - React, Tailwind, and code Playground

by sjmcpherson

HTML

<div class="four columns img-overlay" style="position: relative; border: 1px solid #E1E1E1;">
                    <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/penguin-test.jpg" style="width: 100%;">
                    <div style="display: inline-block; position: absolute; top: -11px; right: -11px; z-index: 10;">
                        <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/new-posts.png">
                    </div>
                    <div style="position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); text-align: center;">
                        <p style="display: inline-block; background: rgba(0, 0, 0, 0.35); font-family: 'Amatic SC'; color: #FFF; text-shadow: 2px 2px 2px #3a3c3d; margin: 0; padding: 10px; font-size: 38px; line-height: 38px;">Featured One</p>
                    </div>
                    <div class="overlay">
                        <h5 style="padding-top: 11px; margin: 0 0 15px 0;">Sub Title</h5>
                        <p style="margin: 0 0 15px 0; padding: 0;">Featured!!! Featured!!! Featured!!! Featured!!! Featured!!! Featured!!! Featured!!! Featured!!!</p>
                        <p style="margin: 0 0 15px 0; padding: 0 0 20px 0;"><a href="#">Featured Link</a></p>
                    </div>
                </div>

CSS

.img-overlay {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow:hidden;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all .5s;
  height: 0;
  background: #FFF;
  text-align: center;
}
.img-overlay:hover .overlay,
.overlay:hover {
  height: 70.5%;
  background: #FFF;
}

.img-overlay > img {
  display: block;
}

.overlay:after {
  content: "HELLO";
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  font-family: 'Amatic SC';
  text-align: center;
  color: red;
  font-weight: bold;
  z-index: 1;
  font-size: 30px;
  font-size: 3rem;
}