<figure>
  <img class="bg" src="https://communitymeetings.files.wordpress.com/2014/11/bgmap.png" />
  <h1>Medical <span>marijuana</span></h1>
  <h2>What it takes<span>to invest in a pot business</span></h2>
  <img class="cig" src="https://communitymeetings.files.wordpress.com/2014/11/ele2.png" height=157 width=200 />
</figure>
@import url(https://fonts.googleapis.com/css?family=Lato|Oswald);

figure{
  position:relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 50px auto;
  overflow: hidden;
}

.cig
{position: absolute;
top:50px; left:20px;}

.bg{
  z-index:-3
}



h1
{text-align: right; 
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-family: Oswald;
  font-size: 40px;
  color: #476B00;

}

span {display:block;}

h2{
  font-family: Lato;
  font-size: 24px;
  color: #2C3419;
  position: absolute;
  bottom: 30px;
  left: 30px;
}

TweenMax.from('h1',3,{x:'300'})
TweenMax.to('h1',3,{delay:3, x:'-300',alpha:0})


TweenMax.from('h2',4,{delay:3.5, x:'-300'})
TweenMax.to('h2',3,{delay:9.5, x:'300',alpha:0})

TweenMax.from('.cig', 3, {delay:6, x:'300'})
TweenMax.to('.cig',3,{delay:8, scale:2})
TweenMax.to('.cig',3,{delay:10, alpha:0})

TweenMax.to('.bg',5,{x:-330})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js