CSS3 is loaded with features, and it gives its users power across various categories. Two of those categories that are fun to experiment with are animation and images. Here are some of the awesome tutorials that will show you how to use CSS3 to create eye catching image gallery and slider effects.

Create a CSS3 Image Gallery with a 3D Lightbox Animation

For the most part, the CSS3 tutorials and examples out there are a little dull. Of course there are some really great examples out there such as Benjamin de Cock’s CSS Playground but most others consist of a drop-shadow here and a few rounded corners there and nothing more. It’s time to start doing something more inspirational and useful at the same time.

CSS 3D Image Gallery

In this experiment we will create a little gallery using CSS 3D transforms and an advanced javascript with jQuery framework.

Experimental CSS3 Animations for Image Transitions

Experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only.

Coding a Rotating Image Slideshow w/ CSS3 and jQuery

Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

Fullscreen Background Image Slideshow with CSS3

Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations.

Build a Kickbutt CSS-Only 3D Slideshow

We’ll be using the new 3D transforms that are part of the CSS3 specification. You’ve probably seen other tutorials on how to use these transforms to build objects and animate them in a 3D space. Usually when creating a slideshow, we’d rely on JavaScript to trigger those transforms. JavaScript would detect a click event and update one of our HTML elements (typically by adding a class). The updated element would then receive new CSS styles.

Pure CSS3 Content Slider

A free, slick content slider developed with pure CSS3 by Caleb Jacob. Look ma! No JavaScript!

Polaroids with CSS3

In this playground adventure, we use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of polaroid pictures.

How to Create a Fancy Image Gallery with CSS3

Even though CSS3 is still in the development stages, it is the new craze that many web developers are excited about. CSS3 is something that will take web development into newer and greater heights, while modernizing the web and allowing web designers and developers to make their creativity a reality.

Pure CSS Vignette

The technique involves a few divs, a bit of simple CSS, and a whole lot of fun.

How to Build a Fully Functional CSS3-Only Content Slider

Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button. Normally, they would be built with jQuery or some other Javascript library. However, with the advent of CSS3, I will show you how to build one using only CSS.

Making an Image Gallery with CSS3

Quite recently I’ve decided to try CSS3 features in operation. To look at what they are suited for in reality. My look fell on the well known galleries of fancybox etc. In other words, I’ve decided to do the similar js gallery, but only on clean html+css.

Slicebox

With the CSS3 3D transformations we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object. In case the browser does not support 3D transformations, a simple slider will be used as fallback.

Flux Slider

Flux slider is a CSS3 animation based image transition framework, inspired in part by the fantastic Nivo Slider jQuery plugin.

CSS3 Photo Stack

Clicking on the “Next” button on the left will advance to the next image. Clicking on the frontmost photo will give you a larger view of it along with a caption if present.

Flickr Photobar Gallery

The aim was to build a bottom photobar that one can easily integrate into a website. It is hidden initially and slides up when the handle is clicked. First, the photo sets are shown and when one of them is chosen, all its images can be viewed as thumbnails. When a thumbnail is clicked, a full image view appears as an overlay.

Image Gallery with CSS3 Columns and Media Queries

This is an experiment using CSS3 columns and media queries to provide an image gallery that responds to the size of the browser. It was created after the idea I got from the homepage of sickdesigner.com where they use CSS3 columns to show their recent posts with featured images.

How To Create a Pure CSS Polaroid Photo Gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

Image Gallery

CSS3 Gallery with 3D hover effect.

How to Create a Pure CSS3 Animated Photo Gallery

Today we decided to prepare nice css3 gallery. Without using any javascript. Yes, yes, you heard right. Today, we will not use scripts at all. This will PURE CSS3 photo gallery. Photos in the gallery will grow when we will click the mouse on them.