Adding captions to images within mixitup jquery

I am using the excellent MixItUp jquery for a filterable and sortable gallery. I checked some examples, and have modified one of the basic use examples so that it uses images. I cannot however, get any form of captions to work. I've tried with and have also tried a couple of jquery scripts I found which pulled ALT text and overlaid the image with that.

Here is a fork of the basic example, where I have just loaded some images into it:

http://codepen.io/anon/pen/dMwLJZ

The container just loads images and has Class and Data tags assigned for the filters and sorts.

<div id="Container" class="container">
  <img class="mix category-1" data-myorder="1" src="http://placehold.it/350x150">
  <img class="mix category-1" data-myorder="2" src="http://placehold.it/350x150">
  <img class="mix category-2" data-myorder="3" src="http://placehold.it/350x150">
  <img class="mix category-2" data-myorder="4" src="http://placehold.it/350x150">

  <div class="gap"></div>
  <div class="gap"></div>
</div>

Could someone please demonstrate how to get some form of caption showing? Ideally over the bottom of image, but even if could get the texts showing beneath an image would be ok, as long as it is of course sortable with the respective image still.

Thanks

Solution

Adding wrapping divs around the images will serve as containers possible captions can be placed inside.
The attributes data-myorder and the classes for the images will be moved to the new wrapping parents.

See here: https://jsfiddle.net/6jc1ynbf/

HTML:

[...]
<div class="img-wrapper mix category-1" data-myorder="2">
  <img src="http://placehold.it/350x150">
  <span class="caption">I'm a caption</span>
</div>
[...]

CSS:

.container .img-wrapper {
  display: inline-block;
  position: relative;
}
.container .img-wrapper > img {
  max-width: 100%;
  max-height: 100%;
}
.container .img-wrapper > .caption {
  color: #eee;
  font-size: 15px;
  text-align: right;
  padding: 4% 6%;
  float: right;
}

That way your pseudo elements will have an effect at all (images can't have pseudo effects because no HTML content can be placed inside them).

If you want to be more flexible about positioning the captions, use position: absolute and place them as you like (position: relative on the wrapper is important).

You can insert captions per data attribute as you already did via content: attr() on a pseudo element.
See this edited fiddle: https://jsfiddle.net/6jc1ynbf/1/