View demo Download source

When writing articles, blog posts, tutorials, magazine entries or anything else, you will often want to include some images, charts, photographs, or even videos and code snippets to illustrate your content.

That being said, you will most likely want to attach some kind of caption to these elements, and perhaps number them so your readers can keep track of your thoughts.

And that’s exactly what we are going to do in today’s tutorial: combining the usage of the <figure> element with CSS counters to make your inserted elements (especially images) sexy as hell!

The figure element

The <figure> element is intended to be used along with the <figcaption> element to mark up images, illustrations, photos, diagrams and code snippets among other things. Here is what the spec says about this element:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Here is the basic markup for a figure:

<figure>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>

Here are a few notes regarding the figure element:

• The <figcaption> element is optional
• You can only have one <figcaption> element in a <figure> element
• You can embed as many other elements as you want in a <figure> element
• When dealing with an image, you can leave the alt attribute empty if you include a <figcaption> to prevent screen readers from reading twice the same content

For more information about the <figure> element, I recommend you this great article from HTML5Doctor. There is also this entry at Mozilla Developer Network and of course the official specification.

Examples

For example, if you want to show a snippet of code, you can do it this way with the <figure> element:

<figure>
	<code>body { background: white; }</code>
	<figcaption>Some illustrated code with figure<figcaption>
</figure>

Basically, instead of adding your images this way:

<img src="cute-kitty.jpg" alt="This is a cute kitty!" />

… you can do something like this:

<figure>
	<img src="cute-kitty.jpg" alt="" />
	<figcaption>This is a cute kitty!<figcaption>
<figure>

Browser support

The <figure> is part of the “new” HTML5 elements, which are not understood by a range of old browsers including Internet Explorer 8. Since you don’t want to make your layout explode because of this tutorial, I’d recommend you include a polyfill to support these elements.

The most known and used polyfill for HTML is html5shiv which you can embed directly from the Google CDN by adding this line into your files:

<!--[if IE lte 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Note, how we use IE-specific conditional comments to prevent other browsers and IE versions greater than 8 from loading this script.

If you wish to know the story behind the html5shiv polyfill, please read this wonderful blog post from Paul Irish.

CSS Counters

CSS Counters have to be one of the most unknown CSS properties in the whole range of properties there is. It makes automatic numbering possible exclusively through CSS, without the help of neither HTML nor JavaScript.

This module relies on two properties and one value:

• counter-reset which is used to initialize and reset one or several counters
• counter-increment which is used to increment one or several counters
• counter() is a valid value for ::before and ::after pseudo-elements, accepting a counter name as parameter in order to display its value

Pretty straight forward, isn’t it? Basically, you initialize a counter with the name you want to the value you want (mostly 0) and you tell a given selector to increment this counter at each occurrence. This counter can then be displayed using CSS generated content and the style and location can be specified with the :before and :after pseudo-elements.

The most basic implementation of a CSS counter has to be this one:

/* 1. We initialize the counter */
body {
	counter-reset: myAwesomeCounter;
}

/* 2. We tell each occurrence of this element to increment the counter */
.myAwesomeElement {
	counter-increment: myAwesomeCounter;
}

/* 3. We display the value of the counter before the element */
.myAwesomeElement:before {
	content: counter(myAwesomeCounter);
}

Note: I lied when I said “2 properties and 1 value”, there is also a counters() value which is almost never used. Please refer to this entry at MDN for more information about it.

Example

Back to our case, shall we? We want to number our images so that they are prefixed by “Fig. 1 – …”, “Fig. 2 – …” and so on, right? Let’s do it simply.

.article {
	counter-reset: figures;
}

.figure {
	counter-increment: figures;
}

.figure figcaption:before {
	content: 'Fig. ' counter(figures) ' - ';
}

Those 3 lines of CSS are enough to number our figures automagically. Isn’t that awesome?

Wrapping everything

The basics

Now that we know how to use both the <figure> element and CSS Counters, it is time to make what we wanted to do: embellish our blog posts.

But before jumping into the code, wouldn’t it be cool if we could easily make floated or centered figures, just by adding a simple class? Sure, it would be. Let’s do this!

We will start by giving our figures some decent styles. Nothing too fancy, something simple and elegant enough to make a kind of frame to your images.

.figure {
	padding: 0.9em;
	border: 3px solid #f5bca8;
	background: #fff;
	margin: 0 auto 1em;
}

In order to horizontally center images and prevent them from breaking out of their container (the <figure> element), we need to add some rules to them (could as well be <video> or something else).

.figure img {
	margin: 0 auto;
	display: block;
	max-width: 100%;
}

Now the caption! We make it stand out a bit, change the typography and center it horizontally. But frankly the styling is up to you. Just remember a caption should be removed without too much hassle, so don’t write a wall of text.

.figure figcaption {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.8em;
	padding: .5em;
	text-align: center;
	color: #fff;
	background: #f5bca8;
}

Numbering

Great, we still haven’t implemented the counter to number our figures. As we’ve seen in the previous section, it is very easy to do.

.article {
	counter-reset: figures;
}

.figure figcaption {
	counter-increment: figures;
}

.figure figcaption:before {
	content: 'Fig. ' counter(figures) ' - ';
}

If you don’t necessarily want to number your images, you can limit this to a given class on the parent element. Perhaps you’ll give your wrapper a .numbered-figures class so that it enables image numbering. Easy enough:

.numbered-figures 							{ counter-reset: figures; }
.numbered-figures .figure figcaption 		{ counter-increment: figures; }
.numbered-figures .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; }

Variations

We have the basics for our system, but we still haven’t set up a way to have floated figures across the page. We will then make two classes:

.figure-left {
	float: left;
	margin: 0 1em .5em 0;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

.figure-right {
	float: right;
	margin: 0 0 .5em 1em;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

For those of you who do not know min-content, it is a valid value for width, min-width, max-width, height, min-height and max-height among other properties include flexbox and grid layout.

In our case, we want the figure element to be as small as possible; basically, we want it to wrap around the image. Because <figure> is a block-level element, it stretches to the width of its parent (100%). We could set it to float: left or display: inline-block to make it collapse to the widest piece of content but if the caption happens to be wider than the image we have a problem.

We could hard code the width to the figure element depending on the image, but it is inflexible and non-responsive. That’s why we introduce the min-content value. To put it simple, it tells the <figure> element to reduce its width so that the image fits inside it perfectly even if the caption has to wrap.

This value is supported by Firefox 3+ with the -moz- prefix and Chrome 18+ with the -webkit- prefix. The unprefixed version is currently not supported by any browser but might be in the future so we leave it.

Non-supportive browsers behave as expected: no width is set, the floated <figure> element wraps around the widest element, either the image or the caption.

Note: there are other values similar to min-content like max-content, fit-content and available. Please refer to this entry at MDN or the working draft of CSS Intrinsic & Extrinsic Sizing Module Level 3for further information about these.

Last but not least, we need to change/remove the max-width value on images for floated figures. Either you want images to have their own size, and you need to set max-width to none, or you want to set a maximum width (which I recommend) and you define whatever you want:

.figure-right img,
.figure-left img {
	max-width: 300px; /* Adjust to suit your needs */
}

Small screens

To make sure floated figures don’t behave oddly on small screens, we need to override a couple of styles to make them full-width and horizontally centered. If you’re building your site using a mobile first approach, you’ll do it the other way but it doesn’t matter really.

@media (max-width: 767px) {
	.figure-left,
	.figure-right {
		float: none;
		margin: 0 0 1em 0;
		width: 100%;
	}

	.figure img {
		max-width: 100%;
	}
}

Usage

Using this is easy as a pie. Either you want an horizontally centered figure in which case you simply have to use the .figure class. Or — most likely — you want to float the figure either on the left or on the right in which case you have to use both the .figure class and a variation class (e.g .figure-left).

<figure class='figure'>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>


<figure class='figure figure-left'>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>


<figure class='figure figure-right'>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>

Final words

That’s pretty much it guys, the only thing left to do is to implement this on your site. Please have a look at the associated demo to see what it looks like or see it live on my own site.

Thanks for reading and happy coding!

View demo Download source

View demo Download source

If you have searched images on Google recently, you might have noticed the interesting expanding preview for a larger image when you click on a thumbnail. It’s a really nice effect and it is very practical, making a search much easier. Today we want to show you how to create a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.

The interesting part is to calculate the correct preview height and to scroll the page to the right position. We’ll expand the preview in a way so that we can see the respective thumbnail row and cover the rest of the remaining page. Note that we don’t use very large images for the preview in the demo so you might see a lot of empty space on large monitors.

The demo features some amazing artwork by Jaime Martinez.

So let’s start!

The Markup

Initially, we need a thumbnail grid for which we will use an unordered list. Each list item will contain an anchor which will have several data attributes:

<ul id="og-grid" class="og-grid">
	<li>
		<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
			<img src="images/thumbs/1.jpg" alt="img01"/>
		</a>
	</li>
	<li>
		<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
			<img src="images/thumbs/2.jpg" alt="img02"/>
		</a>
	</li>
	<li><!-- ... --></li>
	<!-- ... -->
</ul>

The href value will be used to construct the link in the preview description (this also comes in handy when JavaScript is disabled). The data-largesrc attribute contains the path to the larger image. data-title and data-description contain the title and description, respectively.

When we click on a thumbnail, we want a preview element to appear under the list item. For that we will need to insert an element into the grid. In fact, we will use the list item itself and add the preview element after the anchor:

<li>

	<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
		<img src="images/thumbs/2.jpg" alt="img02"/>
	</a>
	
	<div class="og-expander">
		<div class="og-expander-inner">
			<span class="og-close"></span>
			<div class="og-fullimg">
				<div class="og-loading"></div>
				<img src="images/2.jpg">
			</div>
			<div class="og-details">
				<h3>Veggies sunt bona vobis</h3>
				<p>Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.</p>
				<a href="http://cargocollective.com/jaimemartinez/">Visit website</a>
			</div>
		</div>
	</div>

</li>

Let’s style everything!

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

So, let’s start with the thumbnail grid. It will be full width and we’ll center the text. In this case this will mean that it will center the thumbnails because we’ll set them to display: inline-block:

.og-grid {
	list-style: none;
	padding: 20px 0;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.og-grid li {
	display: inline-block;
	margin: 10px 5px 0 5px;
	vertical-align: top;
	height: 250px;
}

The links and images will be displayed as block elements and we’ll remove some default styling:

.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
}

When we click on an item, we will give a special class to the respective list item which will be called og-expanded. We’ll add a little arrow as pseudo-element to the anchor:

.og-grid li.og-expanded > a::after {
	top: auto;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #ddd;
	border-width: 15px;
	left: 50%;
	margin: -20px 0 0 -15px;
}

The preview itself will have the class og-expander and we’ll position that element absolutely. The initial height of the preview will be 0 and we’ll set the overflow to hidden:

.og-expander {
	position: absolute;
	background: #ddd;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	height: 0;
	overflow: hidden;
}

.og-expander-inner {
	padding: 50px 30px;
	height: 100%;
}

The inner division will have some paddings and a height of 100%.

The cross for closing the preview will be created using pseudo-elements, i.e. two rotated lines:

.og-close {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 20px;
	right: 20px;
	cursor: pointer;
}

.og-close::before,
.og-close::after {
	content: '';
	position: absolute;
	width: 100%;
	top: 50%;
	height: 1px;
	background: #888;
	transform: rotate(45deg);
}

.og-close::after {
	transform: rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
	background: #333;
}

The wrappers for the image and for the details will be 50% wide and we’ll make them float next to each other:

.og-fullimg,
.og-details {
	width: 50%;
	float: left;
	height: 100%;
	overflow: hidden;
	position: relative;
}

The details wrapper will have some padding and we’ll center the image inside of the image wrapper by setting the text-align to center and the image itself to display: inline-block. The image will also have a max-height and max-width of 100% so that it adjusts its size to the surrounding container:

.og-details {
	padding: 0 40px 0 20px;
}

.og-fullimg {
	text-align: center;
}

.og-fullimg img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}

Let’s style the text elements and the link:

.og-details h3 {
	font-weight: 300;
	font-size: 52px;
	padding: 40px 0 10px;
	margin-bottom: 10px;
}

.og-details p {
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #999;
}

.og-details a {
	font-weight: 700;
	font-size: 16px;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 20px;
	border: 3px solid #333;
	display: inline-block;
	margin: 30px 0 0;
	outline: none;
}

.og-details a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 10px;
}

.og-details a:hover {
	border-color: #999;
	color: #999;
}

The loading element will be in the same container as the image and we’ll not use any images but this CSS-only technique. We’ll create a little circle and set three box shadows: one for making the circle itself look a bit smoother and two for “copying” the element. Then we create an animation that will change the background color and the box shadow colors sequentially:

.og-loading {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	animation: loader 0.5s infinite ease-in-out both;
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

Last, but not least, we’ll add two media queries for adjusting the text a bit and for hiding the full image once the screen gets so small that the preview image is not really useful anymore (we’ll also not load it in the JavaScript then).

@media screen and (max-width: 830px) {

	.og-expander h3 { font-size: 32px; }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }

}

@media screen and (max-width: 650px) {

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; }
	
}

That’s all the style. Now, let’s take a look at the JavaScript.

The JavaScript

Let’s start by caching some elements and initializing some variables:

	// list of items
var $grid = $( '#og-grid' ),
	// the items
	$items = $grid.children( 'li' ),
	// current expanded item´s index
	current = -1,
	// position (top) of the expanded item
	// used to know if the preview will expand in a different row
	previewPos = -1,
	// extra amount of pixels to scroll the window
	scrollExtra = 0,
	// extra margin when expanded (between the preview element and the next item row)
	marginExpanded = 10,
	$window = $( window ), winsize,
	$body = $( 'html, body' ),
	// transitionend events
	transEndEventNames = {
		'WebkitTransition' : 'webkitTransitionEnd',
		'MozTransition' : 'transitionend',
		'OTransition' : 'oTransitionEnd',
		'msTransition' : 'MSTransitionEnd',
		'transition' : 'transitionend'
	},
	transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
	// support for csstransitions
	support = Modernizr.csstransitions,
	// default settings
	settings = {
		minHeight : 500,
		speed : 350,
		easing : 'ease'
	};

We will start by preloading all the images (thumbnails) in the grid. We then save the offset top and height for each item in the grid, get the current window’s size, and initialize some events:

	function init( config ) {
		
		// the settings..
		settings = $.extend( true, {}, settings, config );

		// preload all images
		$grid.imagesLoaded( function() {

			// save item´s size and offset
			saveItemInfo( true );
			// get window´s size
			getWinSize();
			// initialize some events
			initEvents();

		} );

	}

	// saves the item´s offset top and height (if saveheight is true)
	function saveItemInfo( saveheight ) {
		$items.each( function() {
			var $item = $( this );
			$item.data( 'offsetTop', $item.offset().top );
			if( saveheight ) {
				$item.data( 'height', $item.height() );
			}
		} );
	}

	function getWinSize() {
		winsize = { width : $window.width(), height : $window.height() };
	}

We will bind the click event for each item (anchor) and for the close button (when the item is opened). When we click on an item, the preview with the large image source and the details will be revealed or hidden if already shown. If we click the close button (cross) on the preview then this preview will be closed too.
We are also binding the resize event for the window, where some values are reset and the preview gets closed (if opened).

	function initEvents() {
		
		// when clicking an item, show the preview with the item´s info and large image;
		// close the item if already expanded.
		// also close if clicking on the item´s cross
		$items.on( 'click', 'span.og-close', function() {
			hidePreview();
			return false;
		} ).children( 'a' ).on( 'click', function(e) {

			var $item = $( this ).parent();
			// check if item already opened
			current === $item.index() ? hidePreview() : showPreview( $item );
			return false;

		} );

		// on window resize get the window´s size again
		// reset some values..
		$window.on( 'debouncedresize', function() {
			
			scrollExtra = 0;
			previewPos = -1;
			// save item´s offset
			saveItemInfo();
			getWinSize();
			var preview = $.data( this, 'preview' );
			if( typeof preview != 'undefined' ) {
				hidePreview();
			}

		} );

	}

With the showPreview function we will basically initialize the Preview object, which in turn will expand and reveal the details and the large version of the image. If a Preview instance is already initialized then we will only update the preview with the new details (if the clicked item is in the same row as the current expanded item) or hide it and initialize / open a new one (if not in the same row).
In order to check if the items are in the same row as the current preview, we use the offset top value of the items.

	function showPreview( $item ) {

		var preview = $.data( this, 'preview' ),
			// item´s offset top
			position = $item.data( 'offsetTop' );

		scrollExtra = 0;

		// if a preview exists and previewPos is different (different row) from item´s top, then close it
		if( typeof preview != 'undefined' ) {

			// not in the same row
			if( previewPos !== position ) {
				// if position > previewPos then we need to take the current preview´s height in consideration when scrolling the window
				if( position > previewPos ) {
					scrollExtra = preview.height;
				}
				hidePreview();
			}
			// same row
			else {
				preview.update( $item );
				return false;
			}
			
		}

		// update previewPos
		previewPos = position;
		// initialize new preview for the clicked item
		preview = $.data( this, 'preview', new Preview( $item ) );
		// expand preview overlay
		preview.open();

	}

The Preview object will have a reference to the currently displayed item (Preview.$item), and the index of the expanded item (Preview.expandedIdx). Note that the expanded item is not necessarily the displayed item. For instance if we click on a second item that is on the same row as the one clicked before then the Preview will be “reused” and the Preview.expandedIdx will not be the index of the Preview.$item. We need to keep the reference to the expanded item so that when the Preview is closed we know which item to “collapse”.

	// the preview obj / overlay
	function Preview( $item ) {
		this.$item = $item;
		this.expandedIdx = this.$item.index();
		this.create();
		this.update();
	}

As the Preview object is initialized we create the necessary structure where the item´s details will be rendered and we append it to the item:

	create : function() {
		// create Preview structure:
		this.$title = $( '<h3></h3>' );
		this.$description = $( '<p></p>' );
		this.$href = $( '<a href="#">Visit website</a>' );
		this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
		this.$loading = $( '<div class="og-loading"></div>' );
		this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
		this.$closePreview = $( '<span class="og-close"></span>' );
		this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
		this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
		// append preview element to the item
		this.$item.append( this.getEl() );
		// set the transitions for the preview and the item
		if( support ) {
			this.setTransition();
		}
	}

Then we fill the previous structure with the item´s details (stored in data attributes and the href).
The update function will also be used to just update the content of an existing preview.

	update : function( $item ) {

		// update with new item´s details 
		if( $item ) {
			this.$item = $item;
		}
		
		// if already expanded, remove class "og-expanded" from current item and add it to new item
		if( current !== -1 ) {
			var $currentItem = $items.eq( current );
			$currentItem.removeClass( 'og-expanded' );
			this.$item.addClass( 'og-expanded' );
			// position the preview correctly
			this.positionPreview();
		}

		// update current value
		current = this.$item.index();

		// update preview´s content
		var $itemEl = this.$item.children( 'a' ),
			eldata = {
				href : $itemEl.attr( 'href' ),
				largesrc : $itemEl.data( 'largesrc' ),
				title : $itemEl.data( 'title' ),
				description : $itemEl.data( 'description' )
			};

		this.$title.html( eldata.title );
		this.$description.html( eldata.description );
		this.$href.attr( 'href', eldata.href );

		var self = this;
		
		// remove the current image in the preview
		if( typeof self.$largeImg != 'undefined' ) {
			self.$largeImg.remove();
		}

		// preload large image and add it to the preview
		// for smaller screens we don´t display the large image (the last media query will hide the wrapper of the image)
		if( self.$fullimage.is( ':visible' ) ) {
			this.$loading.show();
			$( '<img/>' ).load( function() {
				self.$loading.hide();
				self.$largeImg = $( this ).fadeIn( 350 );
				self.$fullimage.append( self.$largeImg );
			} ).attr( 'src', eldata.largesrc );	
		}

	}

To reveal the preview we need to set the height of the Preview element and also of the item (to push down the items below). The height of the preview will be the window´s height minus the height of the grid item. To avoid cases where that height could be too small we add the option “minHeight” where we can specify the minimum height needed for the preview element.
As the preview opens we will want to scroll the window so that the preview is completely visible (and if possible, also the item).

	open : function() {

		setTimeout( $.proxy( function() {	
			// set the height for the preview and the item
			this.setHeights();
			// scroll to position the preview in the right place
			this.positionPreview();
		}, this ), 25 );

	}

	setHeights : function() {

		var self = this,
			onEndFn = function() {
				if( support ) {
					self.$item.off( transEndEventName );
				}
				self.$item.addClass( 'og-expanded' );
			};

		this.calcHeight();
		this.$previewEl.css( 'height', this.height );
		this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );

		if( !support ) {
			onEndFn.call();
		}

	}

	calcHeight : function() {

		var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
			itemHeight = winsize.height;

		if( heightPreview < settings.minHeight ) {
			heightPreview = settings.minHeight;
			itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
		}

		this.height = heightPreview;
		this.itemHeight = itemHeight;

	}

	positionPreview : function() {

		// scroll page
		// case 1 : preview height + item height fits in window´s height
		// case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
		// case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
		var position = this.$item.data( 'offsetTop' ),
			previewOffsetT = this.$previewEl.offset().top - scrollExtra,
			scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT;
		
		$body.animate( { scrollTop : scrollVal }, settings.speed );

	}

When closing the preview we reset the heights of the preview element and the expanded item. Once this is done, the preview element / structure gets removed from the DOM.

	close : function() {

		var self = this,
			onEndFn = function() {
				if( support ) {
					$( this ).off( transEndEventName );
				}
				self.$item.removeClass( 'og-expanded' );
				self.$previewEl.remove();
			};

		setTimeout( $.proxy( function() {

			if( typeof this.$largeImg !== 'undefined' ) {
				this.$largeImg.fadeOut( 'fast' );
			}
			this.$previewEl.css( 'height', 0 );
			// the current expanded item (might be different from this.$item)
			var $expandedItem = $items.eq( this.expandedIdx );
			$expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn );

			if( !support ) {
				onEndFn.call();
			}

		}, this ), 25 );
		
		return false;

	}

And that's it! We hope you enjoyed this tutorial and find it inspiring!

View demo Download source

We live in a three-dimensional world, something that designers are trying to recreate in web design every day. The element of depth can add a greater touch of reality to certain design projects.

Creating it can be easier than you think. The key to simulating reality on the 2D screen is by creating depth using images. This can be accomplished in a variety of ways, from the photography itself, to layering of images, manipulation and the use of special effects.

Layering

Layering is a tool that can be intentionally used in the way images and objects are placed in the design process, as a tool to manipulate images or purposefully in the image itself.

We’ve all seen the layout where images are placed on top of each other haphazardly to look like a stack of printed photos. You know the trick. And it works by creating a sense of depth that makes you feel as if you are thumbing through the photographs. This is layering in the design process. Sometimes the effect is more obvious, as in this instance but other times it is more hidden.

Often multiple photos are merged into one to create two distinct parts of an image – a foreground and another background. When done well, the effect should be virtually unseen. Take a look at the Range Rover site above – both the car and the city images are spectacular and when combined they make you feel as if you are standing next to the vehicle looking over the city.

Another effective layering tool is laying a photograph or image over a seemingly flat background. This works fantastically with odd orientations or angled images and backgrounds that have graduated color.

Finally, some images are created with layering in mind. This photography technique is based on the idea of using overlapping lines created by different objects in the image to create depth. Often lines are emphasized by color and contrast in the image to separate objects in the scene from one another. This technique can be difficult for amateur photographers to create.

Photography

One of the most important tools for creating depth is in the images. Framing and composing images with depth in mind can make building for depth a breeze.

But how do you compose photos in this manner? While many opt to hire a professional photographer and just provide instructions for depth, this is not always an option. If you are taking photos yourself for a project think about depth as you shoot with these tips.

Create a visual interest in the foreground. Make sure the photo has a subject and background. Thinking about these as separate parts will help you better frame and create an image.

Change the view. Take a photo from an unexpected angle. This changes the perspective of both the subject and background, adding visual dimension. You can also accomplish this by playing with angles; frame the same image from a comfortable level and with a wider angle.

Take photos in portrait orientation. By changing to a vertical axis, you will frame photos differently.

Think about natural lines and shadows. Sometimes what’s in the photo adds its own sense of depth. Distinct shadows, for example, can make an object come into sharper focus while extending the background.

Image Manipulation

Using photo editing software such as Adobe Photoshop, designers can create added depth in photos with a few simple tricks. This can be a great alternative when working with portraits or other images that were not shot with depth in mind.

The trick is this: With the subject in the foreground, add a blur to the background, while leaving the subject alone. (In Photoshop, a Gaussian blur adjusted to a radius of 5.0 works wonders.)
This simple trick adds focus to the subject in an image while creating a sense of depth by making the background less of a visual priority.

Shadow Effects

Shadows are one of the easiest and most natural ways to create a sense of depth and place for objects and images. Placement, darkness and the shape of shadows can imply very specific meanings. They key for using shadows is for them to look natural.

The best shadows are subtle and follow patterns of light. Make sure shadows mirror the feel of images they accompany. If the first thing a user sees is the shadow, then it probably does not work.

Rounded shadows that rest below objects can create a floating, 3D-style effect. This is a common technique for buttons and smaller user interface elements. Shape-specific shadows in front of objects can make a flat item look like it is standing up, such as those on the Guest’d site. (Did you even notice the shadow before they were mentioned?) Warped shadows – those that do not mirror the shape of the image they relate to – can make an item appear to have another shape, or lift off a background image.

Shadows can also add a touch of realism to an object or item. A shadow behind a person can help lift him off the background, bringing the subject to the forefront of the image. This is a common technique but it is very important that shadows fall opposite of light sources in the image so that the end result appears natural and unforced.

Illustrations and Other Images

The same concept and manipulations that work on photographs also work for illustrations and other images used in design projects. The difference is that you often have to create these effects yourself.

The dramatic shadow used above is a great example of this. The light and dark parts of the background relate specifically to the image, making it “move forward” from the rest of the site.

Conclusion

Depth is a great tool for creating a sense of realism in design projects. It can connect users to what they are viewing on the screen, making them feel like more of a part of the scene.

Even images, from photographs to vector-based user interface elements, that lack true depth can be manipulated to add a sense of having a third dimension. Layering, object orientation and shadows are some of the best tools for creating extra depth.

Creating a web design using transparency can be both beautiful and tricky. Transparency is the effect created when a color block, text or image is “made thinner” or desaturated so that the color is diluted and what is behind it shows through.

The effect can be quite stunning when executed properly – creating a great place for text or as a way to bring focus to a certain part of an image.

Designers must be careful though when using transparency. The effect can be tricky to do well, as readability is often a concern. Transparent boxes and text at the wrong levels can also be distracting and take away from the overall design.

Following is a set of dos and don’ts – with examples of sites executing transparency beautifully.

Do Use Transparency to Create Contrast

The No. 1 benefit to using transparency as a design technique is to create contrast. The effect allows designers to establish a focal point with a clock of color, big text over an image or as a varying color screen with dimension.

Transparency can also be used to help text pop off a background that may not showcase it as well.

It is especially important to consider contrast when working with transparencies. A transparency will only work with both the image (or background) and text are readable. When considering a transparency effect, ask yourself: Will this make the text/image easier for users to understand?

Don’t Cover Essential Parts of an Image

Transparencies should not cover parts of the background or image beneath it that is important to the message. Be aware of what is “lost” when determining placement of transparent frames.

Do Use Transparency in Varying Levels

There is no perfect level of transparency. For some projects an 80 percent transparency is ideal; for others 15 percent may be best. Play with varying levels of transparencies for each project.

Don’t Think Transparency Will Make Text Readable

Just because you are using a transparent box for text does not mean the text is automatically readable. Think about contrast – both in terms of the transparent box to the text and from the background image to the transparent frame.

When using a transparency for images, colored boxes or text, it is vitally important to consider the readability of the words. Remember, your message will not be communicated if design effects render text illegible.

Do Use Transparency in Small Spaces

Transparencies are not just for the main part of your site. This effect can work great in small spaces as well.

Think about using a transparency to show off navigational tools or as a hover effect for buttons and clickable elements. Just try to not go too crazy with multiple transparencies. Pick an element and transparency style and stick to it throughout the site design.

Don’t Place Transparency Over Images with Sharp Contrast

Because of readability concerns, it is best to avoid using transparencies over items that already contain elements containing sharply contrasting elements – think pockets of black and white or colors that are opposites on the color wheel.

Using a transparency over these types of elements, unless really saturated can have a negative impact on your design because it can be difficult to create the correct effect across all parts of the background. Consider a tint box instead.

Do Use Transparency as Art

Transparencies are not just secondary effects. Consider creating a dominant image for your site using this effect.

A large transparency can be a striking way to create contrast, emphasis and visual intrigue.

Don’t Use Transparency as a Decoration

Transparency is not an effect to add as an afterthought because you are bored with the design. Using this effect as a decoration is a surefire way to get into a design pickle.

The use of transparencies should be planned and thought out in advance. Transparency is not a simple effect such as bolding and can look sloppy and unprofessional if not done well.

Do Use Transparency in the Background

Transparent effects are not just for elements at the forefront of your design, this effect can be used on background images as well. Some of the best transparent elements are subtle.

Other transparencies may fall in between image layers. Tony Chester’s site for example uses a brilliant set of layering techniques with transparency to create a multi-dimensional design.

Don’t Use Too Many Transparent Effects Simultaneously

Limit use of different type of transparent effects to one per project. Transparencies should create distinction, contrast and visual interest. Using too much of a distinctive effect such as this one can be distracting for users.

Do Use Transparency with Still and/or Rotating Images

The use of transparencies is not limited to a single-page or still design. They can also work with varying images and backgrounds. Use transparencies in both ways.

Creating a transparency for rotating images can be one of the most tricky executions of the effect, but also one of the most impressive. Think about multiple background images careful. Choose images that have similar color and contrast schemes so that a single transparency will work while image backgrounds move behind it.

Pay careful attention to how the transparency fits over each image so that you maintain the integrity of each image, create a readable photo or other background and text and maintain visual consistency.

Conclusion

Experimenting with transparencies is a great way to expand your design repertoire. Like many other effects, use this technique sparingly and test the design in multiple environments to ensure that it works and looks as you intended.

The biggest challenges with transparency are creating it so that text is readable when interchanging images are used and ensuring that the transparent item does not cover the wrong parts of what is beneath it.

Experiment with different levels and uses of transparency – with images, with backgrounds, as a hover effect – to determine what works best for each project.

View demo Download source

We’ve updated Elastislide, the responsive image carousel. It has undergone some major changes with some improvements and we’ve added some new functionality. Take a look at the original article to see how to use it and what options are available.

Demos

We’ve updated the demos and added some different examples:

Demo 1: A minimum of 3 (default) images are always visible.

Demo 2: Vertical with a minimum of 3 items visible.

Demo 3: Fixed wrapper with a minimum of 2 images is always visible.

Demo 4: Usage in an image gallery; a minimum of 4 images are visible.

Summary of Changes

• We have removed the options for the border and margin since we are relying on the border-box box-sizing, so make sure to include that:

  *,
  *:after,
  *:before {
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  }
  

• Vertical or horizontal layout as an option
• Unnecessary structural HTML has been removed
• Several new public methods available: next(), previous(), slideStart() which moves the carousel to the beginning, slideEnd() which moves it to the end.
• The image width does not need to be specified anymore.

View demo Download source

Today we want to share a jQuery plugin for creating a responsive image grid with you. The idea is to have a list of images and define the number of columns and rows which will arrange the images into a grid. The remaining images will appear with different animations and delays. With some sizing options we can define how the grid should be laid out for different screen widths.

This kind of component can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.

The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0).

The HTML structure is simply an unordered list with anchors and images:

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
	<ul>
		<li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li>
		<li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li>
		<!-- ... -->
	</ul>
</div>

To call the plugin, simply do:

$(function() {
			
	$( '#ri-grid' ).gridrotator();

});

Don’t forget to include the other scripts that are needed.

Options

The following options are available:

// number of rows
rows			: 4,

// number of columns 
columns			: 10,

// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024			: {
	rows	: 3,
	columns	: 8
},

w768			: {
	rows	: 3,
	columns	: 7
},

w480			: {
	rows	: 3,
	columns	: 5
},

w320			: {
	rows	: 2,
	columns	: 4
},

w240			: {
	rows	: 2,
	columns	: 3
},

// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number should not be > options.maxStep
step			: 'random',
maxStep			: 3,

// prevent user to click the items
preventClick	: true,

// animation type
// showHide || fadeInOut || slideLeft || 
// slideRight || slideTop || slideBottom || 
// rotateLeft || rotateRight || rotateTop || 
// rotateBottom || scale || rotate3d || 
// rotateLeftScale || rotateRightScale || 
// rotateTopScale || rotateBottomScale || random
animType		: 'random',

// animation speed
animSpeed		: 500,

// animation easings
animEasingOut	: 'linear',
animEasingIn	: 'linear',

// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval		: 3000,
// if false the animations will not start
// use false if onhover is true for example
slideshow		: true,
// if true the items will switch when hovered
onhover		: false,
// ids of elements that shouldn't change
nochange		: []

When defining the size of the grid, you should keep in mind that you will want to have less images in the grid than what you actually put in the list. Let's say you have a list of 50 images and define 5 columns and 4 rows. This will create a grid of 20 images with 30 left to be switched.

Check out the five demos with different configurations:

• Demo 1: Random animations / 55% container width / 3s between switching
• Demo 2: "fadeInOut" animation / 100% container width / 1 image switch at a time / 600ms between switching
• Demo 3: Random animations / 100% container width / max. 2 images switch at a time / 2s between switching
• Demo 4: Random animations / 55% container width / 3s between switching / elements 1,2,3 and 4 don't switch / clickable elements
• Demo 5: rotateBottom animation / 55% container width / no slideshow / onhover true

Thanks to Jesse Chase for sending us a similar idea and inspiring us.

Hope you find this useful!

View demo Download source

Proper alignment of elements and text on your website greatly impact the overall design.

Meticulous alignment of elements, such as images and text blocks, adds an extra level of professionalism to your site and is visually appealing and calming. Choosing the proper alignment for text within each block can also add a sense of order and contributes to readability and overall design.

But it can sometimes be hard to choose how to align items. Think about your audience as you select how to align elements, especially type, and keep readability in mind as a key concern. When working with other elements consider how they will be used as you develop an outline for your site.

Text

There are several places alignment comes into play with text – for your banner, navigational tools, sidebars and main body text. Each of these elements could include text that is aligned in different ways, but you likely want to develop a consistent style within each text element type.

Text can be aligned in four distinct ways – left, right, center and justified. When selecting a default alignment for body type on your site, first think of the language type will be displayed in. Does it read from left to right, or right to left?

Left aligned text is the default setting in most computer software and for building websites when no other text direction is set. Each line of text aligns with the left margin and is ragged along the right margin. Left justified text is the standard for main body text on most websites because it is easy to navigate, design and read. In web design, word spacing is most consistent with left alignment.

Right aligned text is the default setting for languages that read from right to left. Text aligns with the right margin and is jagged along the left side. Right justification appears most frequently in navigational elements or break out text blocks that are used more like art elements, such as big quotes.

Centered text is centered within the box it resides. Lines of type are typically jagged on both the right and left sides. Centering is most commonly used for text blocks containing few words.

Justified text stretches the entire width of a frame. While justified text is commonly used in print materials, it is uncommon in web design. The look of justified text can be somewhat hard to predict in different browser sizes. Further, because of the lack of defined hyphenation, text can squeeze and stretch somewhat more unpredictably, making readability an issue online.

Images

How you align images is relative to the size of each image and its relation to other elements on your site. Images can be aligned to the left or right margins or centered.

Commonly, display images are centered for maximum impact and to avoid having an abundance of dead space on one side or the other, in the way images are used on this website. The same is often true of images that are used as backgrounds. Display images are sometimes aligned to the left as well depending on how they pair with text or other elements; right-alignment for display images works in some instances but is not a commonly-used tool.

Smaller images offer much more flexibility in terms of alignment. Images that are inset in text blocks can be aligned to either the left or right. Aligning to the left margin creates simple clean lines with no jagged edges around images when paired with left-aligned text. Aligning to the right margin is a common alternative, with left-aligned text creating an uneven edge around the image. The one technique you will want to avoid is centering a small image inside a text block; this can make text very had to read. Do you read across or around the image?

Groups of Elements

By aligning elements in groups, even items that are different such as text and images, you add an extra level of organization and even professionalism to the look of your site. Note how the “The Kitchen” text block sits in alignment with the “What’s happening” block below it in the image above.

Keep in mind that all alignment is not in perfect squares. Items of different shapes and sizes can be aligned to a single plane for emphasis, making interesting shapes and groupings. As you can see in the image above, the effect you get when grouping the same elements with no common alignment is quite different.

Mixed Alignments

You don’t have to pick one type of alignment and stick to it for every part of your site design.

For text, you may choose to center navigation tools while using justified text for the main body copy. This can be a very effective use of alignment tools. The key is aligning common elements in the same way. Outline a plan for how text will be aligned for different parts of your site framework and stick to it.

For images, you may want to alter alignments. Maybe small photos could alternate between left- and right- justified positions for variety. This is a common and very effective practice. Make sure though, that all of your left- or right-aligned items fall along the same gridline. You can add even more emphasis in this configuration by sizing photos at the same widths to create a defined alignment scheme.

I constantly look through websites and wonder why designers allow text and images to get a little too close. Why don’t the elements have room to breathe?

That’s where text- or word-wrapping comes in. Adding space above, below and to the sides of an object embedded in text can make a lot of difference in terms of overall look of your site and even readability.

Wrapping Benefits

The No. 1 reason to use text wrapping settings for images that touch text is to aid readability. The addition of white space around images gives text a cushion, making it easier on the eye.

Depending on your specs, text wrap can also add emphasis to images as well. By separating text and images both will more clearly stand out.

Whether text wrapping is even necessary depends on how your site is constructed. Blogs using a wide columnar design commonly use small photos embedded in text and rely on text wrap settings to make images and text work together. Many sites though have a modular construction that almost makes text wrap unnecessary because text and images are almost exclusively stacked and rarely appear side-by-side.

How Much Wrap?

How much wrap to put around an image is a little trickier. Blogging sites and software (such as WordPress and Blogger) often have a set of defaults that will wrap text for you. The wrap specs correspond to the style template you select when you set up the blog.

These text wrap styles tend to be somewhat tight but typically work effectively for the blog-format. Standard text wraps typically allow for 5 or 6 pixels of space all the way around an image. Personally, this is a little tight for my taste. For a super clean text wrap style consider wrapping text so that the vertical space on either side of an image is equal to the horizontal space above and below the image. You can accomplish this by setting the text wrap specs to mirror the leading of the body copy.

Photo and text alignment can impact the look of text wrap as well. Wrap will always seem more consistent and intentional when it falls next to text that is justified (so that all lines start/stop at the same place. Wrap will appear looser when it falls alongside ragged text.

Types of Wraps

Text wrap typically appears in one of three ways – as a square-shaped box around an image, an oddly-shaped halo around an image to match the contours of the image (for non-square images) or as a wrap that knocks out all of the lines around an image (jump text wrap).

Text wrap can occur outside of an object – to keep text from touching the borders of another frame – or inside of an object. Inside text wraps keep text contained within a frame, such as the text inside the black shape on the Impero site.

Wrap Scenarios to Avoid

Text wrap can cause readability issues if the wrap causes text to break poorly. Watch for very thin columns of text next to a wrap. You may want to rethink your photo size or placement if the wrap causes excessive hyphenation (aim for hyphens no more frequently than at the end of every three lines) or blank lines of text. (This happens when words can’t fit in the space left after the wrap is applied.)

Photo placement can also case wrapping concerns. Avoid having lots of jagged wraps throughout your page. Varying wrap widths and photo sizes can make for a jarring design. Instead, group many small images together and use a single wrap or use photos with equally-sized frames.

Consider alignment as well. Images and text wrap will appear more uniform if all of the images are placed in the same manner – to the left, center or right side of the text block. Centered images can be tough to wrap around because text will often break oddly around the object. Also using a left-aligned image and close to a right-aligned image can create an odd, difficult-to-read block of text squeezed between the images.

Code

When creating your own styles sheets, you might consider developing your own text wrap specs. You can apply classes that will create the desired alignment and spacing.

<img src="images/flower.jpg" alt="A yellow rose" class="my-align-class" />

Where my-align-class could be one of the following:

.align_left {
	float: left; 
	margin-right: 1em;
	margin-bottom: 1em;
}

.align_right {
	float: right; 
	margin-left: 1em;
	margin-bottom: 1em;
}

.align_center {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
}

For wrapping text around non-rectangular shapes, you can take a look at the following tools/techniques:

• CSS Text Wrapper: Generate HTML/CSS to wrap content to any shape or curve
• CSS – Wrapping text around non-rectangular shapes

Conclusion

Text wrap is a great thing to keep in your design toolbox. In particular, it works great on sites that have large blocks of text with small images scattered throughout.

But don’t just rely on a template for wrap settings. Play with the code and add more space (or even take away a few pixels) to create a style that works best for your site.

Consider alternatives to wrapping text. Instead of dropping an image into the text, let the image float above it (look at how the images and text wrap on this site).

Text wraps can be tricky. Successful wrapping depends on the size of image, size of text and with of column where everything lives. Make sure your wrap passes the eye test and text is easier, not more difficult to read, with the addition of a text wrap.

Images courtesy of soa2002 and frankjuarez.

View demo Download source

Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We’ll use radio buttons with labels and target the respective panels with the general sibling selector.

The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License.

You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type.

Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations.

The Markup

The HTML will consist of three major parts: the radio buttons and the labels, the container with the panels and their “slices” for each image, and the titles. The container with the class cr-bgimg part will have a division for each of the panels and inside we’ll place spans for every image with the right background position. So, the first panel will have four slices, each having the one of the images as background with the left-most position. The second panel will have again four slices but now the background position will be moved to be showing the next part of the respective image:

<section class="cr-container">			

	<!-- radio buttons and labels -->
	<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
	<label for="select-img-1" class="cr-label-img-1">1</label>

	<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
	<label for="select-img-2" class="cr-label-img-2">2</label>

	<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
	<label for="select-img-3" class="cr-label-img-3">3</label>

	<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
	<label for="select-img-4" class="cr-label-img-4">4</label>

	<div class="clr"></div>	

	<!-- panels -->
	<div class="cr-bgimg">
		<div>
			<span>Slice 1 - Image 1</span>
			<span>Slice 1 - Image 2</span>
			<span>Slice 1 - Image 3</span>
			<span>Slice 1 - Image 4</span>
		</div>
		<div>
			<span>Slice 2 - Image 1</span>
			<span>Slice 2 - Image 2</span>
			<span>Slice 2 - Image 3</span>
			<span>Slice 2 - Image 4</span>
		</div>
		<div>
			<span>Slice 3 - Image 1</span>
			<span>Slice 3 - Image 2</span>
			<span>Slice 3 - Image 3</span>
			<span>Slice 3 - Image 4</span>
		</div>
		<div>
			<span>Slice 4 - Image 1</span>
			<span>Slice 4 - Image 2</span>
			<span>Slice 4 - Image 3</span>
			<span>Slice 4 - Image 4</span>
		</div>
	</div>

	<!-- titles -->
	<div class="cr-titles">
		<h3>
			<span>Serendipity</span>
			<span>What you've been dreaming of</span>
		</h3>
		<h3>
			<span>Adventure</span>
			<span>Where the fun begins</span>
		</h3>
		<h3>
			<span>Nature</span>
			<span>Unforgettable eperiences</span>
		</h3>
		<h3>
			<span>Serenity</span>
			<span>When silence touches nature</span>
		</h3>
	</div>

</section>

The h3 elements for the titles will have two spans, one for the main headline and one for the sub-headline.

Let’s style this baby.

The CSS

I will omit all the vendor prefixes, but you will, of course, find them in the files.
We’ll be going through the style of demo 1.

Our aim is to first hide those radio buttons by covering them up with labels. In web browsers, clicking on a label will make the respective checkbox or radio button selected. Giving an ID to the input, we can use the for = idref attribute of the label to reference the respective input.

Second, we want to place all the background images correctly and third, we want to show the respective image slices and titles when clicking on a label.

So, lets first syle the section and give it a white border with some subtle box box shadow:

.cr-container{
	width: 600px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	border: 20px solid #fff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

Since we want to use the general sibling selector in order to “reach” the right image slices and titles, we need to place the labels before those containers. Let’s make sure that they are on top as a layer (z-index) and push its position down by adding a top margin of 350px;

.cr-container label{
	font-style: italic;
	width: 150px;
	height: 30px;
	cursor: pointer;
	color: #fff;
	line-height: 32px;
	font-size: 24px;
	float:left;
	position: relative;
	margin-top: 350px;
	z-index: 1000;
}

Let’s prettify the label by adding a little circle. We’ll create a pseudo element and place it centered behind the label text:

.cr-container label:before{
	content:'';
	width: 34px;
	height: 34px;
	background: rgba(130,195,217,0.9);
	position: absolute;
	left: 50%;
	margin-left: -17px;
	border-radius: 50%;
	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
	z-index:-1;
}

In order to create a separation between the panels we’ll use a little trick. We’ll create another pseudo-element for the label and extend it to stretch over the panel. Using a gradient, we’ll make the line “fade out” at the top:

.cr-container label:after{
	width: 1px;
	height: 400px;
	content: '';
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	position: absolute;
	bottom: -20px;
	right: 0px;
}

The last panel should not have that line so we simply give it 0 width:

.cr-container label.cr-label-img-4:after{
	width: 0px;
}

Now, that we’ve taken care of the label look, we can hide the inputs:

.cr-container input{
	display: none;
}

Whenever we click on a label, the respective input gets checked. Now we can target the respective label using the general sibling selector. So, we will change the color the “selected” label:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
	color: #68abc2;
}

And we’ll also change the background color and box shadow of its cicle pseudo-element:

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
	background: #fff;
	box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}

The container for the image panels will occupy all the width and it will be positioned absolutely. This container will be used later in order to set the background image to the currently selected image. We need to do this in order to have an image visible by default. So we’ll also add some background properties already:

.cr-bgimg{
	width: 600px;
	height: 400px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
	background-repeat: no-repeat;
	background-position: 0 0;
}

Since we have four panels/images, one panel will have the width of 150 pixels (600 divided by 4). The panels will be floating left and we’ll hide their overflow since we don’t want to see the slices coming out when we slide them:

.cr-bgimg div{
	width: 150px;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;
	background-repeat: no-repeat;
}

Each slice span will be positioned absolutely and initially, they will be hidden by placing them out of the panel with a left of -150px:

.cr-bgimg div span{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: -150px;
	z-index: 2;
	text-indent: -9000px;
}

Now, let’s take care of the background of the image container and the respective image slices:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(../images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
	background-image: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
	background-image: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
	background-image: url(../images/4.jpg);
}

We also need to give the right background position to the slices depending on the panel:

.cr-bgimg div:nth-child(1) span{
	background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
	background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
	background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
	background-position: -450px 0px;
}

When we click on a label we will simply slide all the slices out to the right:

.cr-container input:checked ~ .cr-bgimg div span{
	animation: slideOut 0.6s ease-in-out;
}
@keyframes slideOut{
	0%{
		left: 0px;
	}
	100%{
		left: 150px;
	}
}

…all except the slices with the respective background image. Those will slide in from -150px to 0px:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
	transition: left 0.5s ease-in-out;
	animation: none;
	left: 0px;
	z-index: 10;
}

Last, but not least, we want to style the h3 title elements and their spans. The h3 will have a opacity transition and once we select the respective label/input the opacity will increase from 0 to 1:

.cr-titles h3{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;
	z-index: 10000;
	opacity: 0;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 70px;
	display: block;
	letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
	letter-spacing: 0px;
	display: block;
	background: rgba(104,171,194,0.9);
	font-size: 14px;
	padding: 10px;
	font-style: italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
	opacity: 1;
}

If you don’t want to use the label trick on mobile devices you could, for example, use a media query:

@media screen and (max-width: 768px) {
	.cr-container input{
		display: inline;
		width: 24%;
		margin-top: 350px;
		z-index: 1000;
		position: relative;
	}
	.cr-container label{
		display: none;
	}
}

This is just a quick solution and it might be better to check, if the label trick is supported.

And that’s it! There are many possibilities of animations that can be done here. Check out the demos to see more.

Demos

1. Demo 1: Slide to right
2. Demo 2: Odd/even slide to left/right
3. Demo 3: Odd/even slide up/down
4. Demo 4: Scale up/down

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

View demo Download source

Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by.

The images used in the demo are by Joanna Kustra.

Please note that the 3D effects will only work in Webkit browsers. You can view a video of how the effects look here: Experimental CSS3 Animations for Image Transitions Video Demonstration

How it works

Given a set of images, we’ll add the first image to the wrapper with the class te-cover. With JavaScript we’ll control the transition classes given to the elements in the wrapper te-transition and which image will be shown. This is how the first example looks like:

<div id="te-wrapper" class="te-wrapper">
	<div class="te-images">
		<img src="images/1.jpg"/>
		<img src="images/2.jpg"/>
		<img src="images/3.jpg"/>
		<img src="images/4.jpg"/>
		<img src="images/5.jpg"/>
	</div>
	<div class="te-cover">
		<img src="images/1.jpg"/>
	</div>
	<div class="te-transition">
		<div class="te-card">
			<div class="te-front"></div>
			<div class="te-back"></div>
		</div>
	</div>
</div>

The main idea is to always show the regarding image using te-cover. When we start an animation by giving the respective animation class, the te-cover will get hidden while the animation runs. When the animation finishes, the te-cover element will be shown again, with the updated image.

Demos

Each demo will have a group of possible transitions that can be selected from the dropdown menu above the image.

1. Demo 1: Flip
2. Demo 2: Rotate
3. Demo 3: Multi-Flip
4. Demo 4: Cube
5. Demo 5: Unfold
6. Demo 6: Others

We hope you like our little experiment and find it inspiring and useful!

View demo Download source