Cacher is the code snippet organizer for pro developers

@import url(http://fonts.googleapis.com/css?family=Monoton);


body{position:relative;background:#ddd}

figure{ 
  position:relative;
  margin: 10% auto;
  overflow:hidden;
  border:5px solid white;
  box-shadow: 0 6px 6px -6px black;}
figure,figure img,
figure:before{
  width:300px; height:300px;}

figure:before{
  position:absolute;
  background: rgba(218, 61, 61, 0.7);
  content:" ";
  top:0;
  left:0;
  overflow:hidden;}
figure span{position:absolute;}


.bar-1,
.bar-2,
.bar-3,
.bar-4,
.bar-5{
  background:white;
  display:inline-block;
  height:30px;}

.firstName,
.lastName{
  font-family: 'Monoton', cursive;
  font-size:2em;
  line-height: normal;
}

.firstName{top:2em;left:3em;color: #FFF;}
.lastName{top: 6em;left:3em;color: #FFF;}
.bar-1{left: 0;top: 4.5em;width:4em;}
.bar-2{right: 0;top: 4.5em;width: 6em;}
.bar-3 {left: 0;top: 8.5em;width: 20em;}
.bar-3:before{ 
  content: "My name is Alf and i love design."; 
  position: absolute;
  line-height: 2em; 
  color: #777;
  left: 6em;
  width:15em;
}
.bar-4{left: 0;top: 12.5em;width: 5em;}
.bar-5{right: 0;top: 12.5em;width: 3.5em;}

.firstName{
  animation: one 2.5s 1 ease;
  -webkit-animation: one 2.5s 1 ease;
  -moz-animation: one 2.5s 1 ease;
  -o-animation: one 2.5s 1 ease;
  -ms-animation: one 2.5s 1 ease;}
.lastName{
  animation: two 2.5s 1 ease;
  -webkit-animation: two 2.5s 1 ease;
  -ms-animation: two 2.5s 1 ease;
  -o-animation: two 2.5s 1 ease;
  -moz-animation: two 2.5s 1 ease;}
.bar-1{
  animation: three 1.5s 1 ease;
  -webkit-animation: three 1.5s 1 ease;
  -o-animation: three 1.5s 1 ease;
  -ms-animation: three 1.5s 1 ease;
  -moz-animation: three 1.5s 1 ease;}
.bar-2{
  animation: three 3s 1 ease;
  -webkit-animation: three 3s 1 ease;
  -moz-animation: three 3s 1 ease;
  -o-animation: three 3s 1 ease;
  -ms-animation: three 3s 1 ease;}
.bar-3{
  animation: three 2s 1 ease;
  -webkit-animation: three 2s 1 ease;
  -moz-animation: three 2s 1 ease;
  -o-animation: three 2s 1 ease;
  -ms-animation: three 2s 1 ease;}
.bar-4{
  animation: three 0.5s 1 ease;
  -webkit-animation: three 0.5s 1 ease;
  -moz-animation: three 0.5s 1 ease;
  -o-animation: three 0.5s 1 ease;
  -ms-animation: three 0.5s 1 ease;}
.bar-5{
  animation: three 1s 1 ease;
  -webkit-animation: three 1s 1 ease;
  -moz-animation: three 1s 1 ease;
  -o-animation: three 1s 1 ease;
  -ms-animation: three 1s 1 ease;}
figure:before{
  animation: four 5s 1 ease;
  -webkit-animation: four 5s 1 ease;
  -moz-animation: four 5s 1 ease;
  -o-animation: four 5s 1 ease;
  -ms-animation: four 5s 1 ease;
}
.bar-3:before{
  animation:  five 3s 1 ease-in-out;
  -webkit-animation: five 3s 1 ease-in-out;
  -moz-animation:  five 3s 1 ease-in-out;
  -o-animation:  five 3s 1 ease-in-out;
  -ms-animation:  five 3s 1 ease-in-out;
}


@keyframes one{from{top:-130em;}}
@keyframes two{from{top:185em;}}
@keyframes three{from{width:0}}
@keyframes four{from{background:rgba(61, 218, 205, 0.97);}}
@keyframes five{from{left:100em;}

@-webkit-keyframes one{from{top:-130em;}}
@-webkit-keyframes two{from{top:185em;}}
@-webkit-keyframes three{from{width:0;}}
@-webkit-keyframes four{from{ background:rgba(61, 218, 205, 0.97);}}
@-webkit-keyframes five{from{left:100em;}

@-moz-keyframes one{from{top:-130em;}}
@-moz-keyframes two{from{top:185em;}}
@-moz-keyframes three{from{width:0}}
@-moz-keyframes four{from{ background:rgba(61, 218, 205, 0.97);}}
@-moz-keyframes five{from{left:100em;}

@-o-keyframes one{from{top:-130em;}}
@-o-keyframes two{from{top:185em;}}
@-o-keyframes three{from{width:0}}
@-o-keyframes four{from{background:rgba(61, 218, 205, 0.97);}}
@-o-keyframes five{from{left:100em;}

@-ms-keyframes one{from{top:-130em;}}
@-ms-keyframes two{from{top:-85em;}}
@-ms-keyframes three{from{width:0}}
@-ms-keyframes four{from{ background:rgba(61, 218, 205, 0.97);}}
@-ms-keyframes five{from{left:100em;}

<figure>
  <span class="bar-1"></span>
  <span class="firstName">ALF</span>
  <span class="bar-2"></span>
  
  <span class="bar-3"></span> 
  
  <span class="bar-4"></span>
  <span class="lastName">Design</span>
  <span class="bar-5"></span>
    
  <img src="http://labs.nakome.com/fotos/alf.jpg" alt="Moncho Varela" />
</figure>