JSFiddle - React, Tailwind, and code Playground

HTML

<div class="reveal open">
    <p>Main content</p>
  </div>

CSS

* {
  margin: 0;
  padding: 0;
}

.reveal {
  width: 380px;
  height: 660px;
  margin: 50px;
  float: left;
}

.open {
  background: url(http://uploadir.com/u/9btuxs9t) 0px 330px, url(http://uploadir.com/u/9btuxs9t) 0px -405px, #42413C;
  background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  -o-transition: background-position 0.3s ease;
  -ms-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
}

.opened {
  background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px, #42413C;
  background-repeat: no-repeat;
}

.reveal p {
  font: 45px/300px Helvetica, Arial, sans-serif;
  text-align: center;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.revealed p {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
    $('.reveal').ready(function() {
        $('.reveal').addClass('opened');
        $('.reveal').addClass('revealed');
    });
});