Stickman was a project I gave myself to mess around with css transitions. Click some buttons. All animation you see is powered by css. I simply use jquery to swap a class on the top level div and style handles the rest. I eventually want to use something like this to display characters in Light Gray RPG.

All over this site I am using a custom pop up function I created.

Feel free to use this simple pop up on your site. Just use the markup below and add the CSS and JS to your site.

HTML:

the 'data-pop' attribute activates the magic

<figure class="gal" data-pop>
	<img src="img/photo/macro/IMG_3665.JPG">
</figure>

JS:

This function toggles the .full class when clicked. Make sure you have jquery on your page.

$('[data-pop]').on("click", function () {
	$(this).toggleClass("full");
});

CSS:

This makes the figure and image full screen when .full is applied

[data-pop].full {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	background: #111;
	text-align: center;
	z-index: 1; 
}
[data-pop].full img {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto; 
}

So there it is, a super simple, super light pop up that always keeps the full screen image at max size without any cropping. There are optional features I have baked in like caption display and gallery support with next and previous buttons. Feel free to view all the source and add those in if you like.