JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<figure class="frame">
<img src="https://dl.dropboxusercontent.com/u/330966/static/reel.png" />
  <figcaption class="info">
    <h3>Baitrunner XT FA</h3>
    <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps<br /><br /> Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim.
          <a href="#" class="button l">movie</a>            
          <a href="#" class="button r">details</a>                     
    </p>
  </figcaption>
</figure>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
* {margin:0px;padding:0px;color: #191818;text-align:center;}
.frame, 
.frame:before,
.frame .info,
.info > p,
.button {
  display:block;
}
.frame:before,
.frame .info,
h3,
.info > p,
.button {
  position:absolute;
}
.frame, 
.frame:before {
  background-position:0% 0%, 
                      0% 100%, 
                      100% 0%, 
                      100% 100%;
	background-repeat: no-repeat;
}
.frame {
  position:relative;
  width:400px;
  height:550px;
  margin: 5rem auto;
  background-image:linear-gradient(white 0px, white 10px),
                   linear-gradient(white 0px, white 10px),
                   linear-gradient(white 0px, white 10px),
                   linear-gradient(white 0px, white 10px);
  background-size:10px 80px;
	background-position:0% 0%, 
                      0% 100%, 
                      100% 0%, 
                      100% 100%;
	background-repeat:no-repeat;
}
.frame:before {
  content:'';
  width:100%;
  height:100%;
  background-image:linear-gradient(white 0px, white 10px),
                   linear-gradient(white 0px, white 10px),
                   linear-gradient(white 0px, white 10px),
                   linear-gradient(white 0px, white 10px);
  background-size: 80px 10px;
}
.frame > img {
  -webkit-animation:blurout 2s  ease forwards;
  animation:        blurout 2s  ease forwards;
}
.frame:hover > img {
  -webkit-animation:blurin 1s ease forwards;
  animation:        blurin 1s ease forwards;
  
}
.frame .info {
  bottom:30px;
  left:30px;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  width:340px;
  height:50px; 
  overflow:hidden;
  -webkit-transition:height 0.3s 0.5s;
  transition:        height 0.3s 0.5s;
}
.frame:hover .info {
  height:490px;
  -webkit-transition:height 0.3s;
  transition:        height 0.3s;
}
h3 {
  top:0px;
  left:0px;
  width:100%;
  background:white;
  font-size:1.5rem;
  font-weight:300;
 ...