<link href="https://fonts.googleapis.com/css?family=Reenie+Beanie|Loved+by+the+King" rel="stylesheet" type="text/css">
<figure>
  <img src="http://lorempixel.com/300/250/" alt="Some lorempixel image"/>
  <figcaption>Some handwritten caption</figcaption>
</figure>
<figure>
  <img src="http://lorempixel.com/300/250/" alt="Some lorempixel image"/>
</figure>

/*****************************************************
* Note: I included a "global" stylesheet for all 
* my pens within the settings (just some background 
* and font stuff)
*****************************************************/
figure {
  display: inline-block;
  position: relative;
  left: 0;
  -moz-transform:rotate(-5deg);
  -webkit-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

img {
  border-color: white /* for an acceptable IE result*/;
  border-width: 15px;
  -moz-border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
  border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
  border-style: solid;
  margin: auto;
}

/**********************************************************
* If a caption is supplied the image needs a little space 
* at the bottom to include the caption within the frame
***********************************************************/
img.hasCaption {
  padding-bottom: 50px;
}

figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  background-color: white;
  text-align: center;
  color: blue;
  font-family: 'Reenie Beanie', cursive;
  font-size: 30px;
  padding: 10px;
}

/********************************************
* This tiny jQuery snippet adds a specific 
* class to the image if a caption is present. 
********************************************/
$(document).ready(function () {
  $("figure img + figcaption").prev().addClass('hasCaption');
});