GridListImageItem + Badge Overlay

App.js

require('spotlight');

var
	ready = require('enyo/ready'),
	kind = require('enyo/kind'),
	GridListImageItem = require('moonstone/GridListImageItem'),
	ImageBadge = require('moonstone/ImageBadge');

ready(function () {
	var C = kind({
		classes: 'moon',
		components: [
			{kind: GridListImageItem, source: 'http://placehold.it/300x300', caption: 'Title', subCaption: 'Subtitle', classes: 'overlay-top', ontap: 'itemTapped', components: [
				{kind: ImageBadge, icon: 'play', ontap: 'badgeTapped'}
			]},
			{kind: GridListImageItem, source: 'http://placehold.it/300x300', caption: 'Title', subCaption: 'Subtitle', classes: 'badge-right', ontap: 'itemTapped', components: [
				{kind: ImageBadge, icon: 'play', ontap: 'badgeTapped'}
			]},
			{kind: GridListImageItem, source: 'http://placehold.it/300x300', caption: 'Title', subCaption: 'Subtitle', classes: 'overlay-top badge-right', ontap: 'itemTapped', components: [
				{kind: ImageBadge, icon: 'play', ontap: 'badgeTapped'}
			]},
			{kind: GridListImageItem, source: 'http://placehold.it/300x300', caption: 'Title', subCaption: 'Subtitle', classes: 'overlay-transparent overlay-top badge-right', ontap: 'itemTapped', components: [
				{kind: ImageBadge, icon: 'play', ontap: 'badgeTapped'}
			]},
			{name: 'result'}
		],
		itemTapped: function (sender, event) {
			this.$.result.set('content', 'Item Tapped: ' + sender.id);
		},
		badgeTapped: function (sender, event) {
			this.$.result.set('content', 'Badge Tapped: ' + sender.id);
			return true;
		}
	});

	new C().renderInto(document.body);
});

App.less

.moon-gridlist-imageitem {
	height: 400px;
	width: 300px;
	margin: 10px;
}