This is a pure CSS 3D image effect that showcases hidden planes that are going to be shown 1 by 1 when hovering over an image in a gallery. It esse...

This is a pure CSS 3D image effect that showcases hidden planes that are going to be shown 1 by 1 when hovering over an image in a gallery. It essentially flips the planes with a smooth motion, one after another with an arranged delay, and on mouseOut, it just transits backward. Created by CodePen user ycw.

A stunning 3D Photo Gallery snippet, made in pure CSS by Codepen user Maciej Leszczyński, it consists of a cube with a photo/image assigned to each...

A stunning 3D Photo Gallery snippet, made in pure CSS by Codepen user Maciej Leszczyński, it consists of a cube with a photo/image assigned to each of its faces. Upon selecting an image listed on the right side column, the cube will rotate to display the face where that image has been added. It features smooth CSS animations, and 6 faces for different photos.

An image gallery with neat expanding panels made in pure CSS by Codepen user Shaw. Image panels expand to full width upon mouse hover, creating a g...

An image gallery with neat expanding panels made in pure CSS by Codepen user Shaw. Image panels expand to full width upon mouse hover, creating a great looking effect. It has keyboard support and CSS Vars to progressively enhance with animation.

A set of panels created with CSS and JavaScript that you can modify in size by dragging the divisions to any of the sides. You can drag the vertica...

A set of panels created with CSS and JavaScript that you can modify in size by dragging the divisions to any of the sides. You can drag the vertical divisions or the horizontal divisions in a responsive container. The snippet can be used as a gallery, and it easy to modify.

A library of CSS demos that you can use as an alternative to JavaScript. It includes toggles, carousels, games, menus, animations and others, it in...

A library of CSS demos that you can use as an alternative to JavaScript. It includes toggles, carousels, games, menus, animations and others, it includes the option to try the demos included in the page.

A snippet of a gallery created using CSS and JS; the images are called using Java and displayed within a grid with CSS, the items lighten with a ho...

A snippet of a gallery created using CSS and JS; the images are called using Java and displayed within a grid with CSS, the items lighten with a hover, and by clicking them the image will be displayed along all the grid.

Quite a creative grid gallery that features its images in turned away jigsaw puzzle pieces that come into place as you hover over them composing th...

Quite a creative grid gallery that features its images in turned away jigsaw puzzle pieces that come into place as you hover over them composing the image.

A beautiful gallery made in CSS and jQuery created for freelancers and anyone who needs a portfolio. It has a nice effect when you click a thumbnai...

A beautiful gallery made in CSS and jQuery created for freelancers and anyone who needs a portfolio. It has a nice effect when you click a thumbnail, expanding the view and displaying a larger image with caption. It was created by MightyShaban and made available in CSSdeck.

An expandable image gallery made with CSS and JavaScript. It makes an element expand on click, occupying the whole screen and the going back again ...

An expandable image gallery made with CSS and JavaScript. It makes an element expand on click, occupying the whole screen and the going back again when clicked. It is a free resource, easy to implement, and it also comes with an article about the creation process.

A beautiful set of CSS transforms and transitions compressed within a jQuery plugin that allows you to show stacks of cards in different ways. Amon...

A beautiful set of CSS transforms and transitions compressed within a jQuery plugin that allows you to show stacks of cards in different ways. Among its effects, you can find fan right and left, rotated spread (horizontal and vertical), linear spread right and left, and many more. remember they only work in browsers that support transitions and transforms.

A beautiful and flat code snippet composed of a carousel created with jQuery and CSS. It is made of parallelograms with a thumbnail and a little la...

A beautiful and flat code snippet composed of a carousel created with jQuery and CSS. It is made of parallelograms with a thumbnail and a little label for the name right below. You can style it any way you want and use it for free (personal and commercial).

A pack of effects made in CSS that demonstrates how to create slick thumbnail hover effects with amazing CSS3 animated transitions. When moving the...

A pack of effects made in CSS that demonstrates how to create slick thumbnail hover effects with amazing CSS3 animated transitions. When moving the mouse over the images, an animation will reveal a text about them and a link for further information. There’s a good amount of examples in here, a perfect starting point for even more designs of your own!

Noria provides an interesting alternative to regular galleries. It comes in the form of a wheel that displays all images as it spins, just press th...

Noria provides an interesting alternative to regular galleries. It comes in the form of a wheel that displays all images as it spins, just press the button to get it going. Once you hover on an image, it will enlarge to give you a more detailed look.

A CSS image gallery with some 3D animations and transition effects when we hover over each element. The animation allows to see the thumbnail descr...

A CSS image gallery with some 3D animations and transition effects when we hover over each element. The animation allows to see the thumbnail description in a black box. This design is perfect for designers and animators who need to showcase their work.

Christophe Benoliel Molina has created this image gallery based in CSS only. Performance wise, it accomplishes a great level. However, the design c...

Christophe Benoliel Molina has created this image gallery based in CSS only. Performance wise, it accomplishes a great level. However, the design could be stronger, so advanced users might want to apply their skills to improve its appearance.

This simple tutorial is going to teach you how to apply a "stacked" effect to your images with the help of CSS3...

This simple tutorial is going to teach you how to apply a "stacked" effect to your images with the help of CSS3's pseudo-elements. Compatibility has improved over the years since this was released, so you should be able to use this is a variety of browsers.

This tool puts Polaroid frames around the pictures we use it with. Also, it is possible to add captions under the frames with a handwritten font. A...

This tool puts Polaroid frames around the pictures we use it with. Also, it is possible to add captions under the frames with a handwritten font. All credit for the project goes to Brett Donohoo who put it up in CodePen.

An attractive, vintage-looking gallery that displays pictures that float over a white piece of "paper." The sha...

An attractive, vintage-looking gallery that displays pictures that float over a white piece of "paper." The shadow in between provides a smooth and very convincing appearance. Items in this example have very different sizes and even then, they play together perfectly to form a cohesive gallery.

Peter Westendorp created this cool set of shelves using CSS' 3D capabilities. The images displayed come with a ...

Peter Westendorp created this cool set of shelves using CSS' 3D capabilities. The images displayed come with a smooth shadow that gives them a convincing look (that, and the nicely texturized wall). Moreover, users can approach each shelf by clicking the selectors on top.

This gallery combines an easily integrable Instagram feed and Animate.css, a library that allows you to add nice transitions to your elements. In t...

This gallery combines an easily integrable Instagram feed and Animate.css, a library that allows you to add nice transitions to your elements. In this particular case, a shaky effect is applied when the pictures appear. Also, on hover, an overlay shows the amount of likes the picture has gathered so far.

A colorful wall that displays pictures in a grid inside a wide border along with a shadow that provides a sense of floatation around items. The goo...

A colorful wall that displays pictures in a grid inside a wide border along with a shadow that provides a sense of floatation around items. The good part comes when we hover on the elements since they will display information with one of a total of 15 possible animations we have at out disposal.

This is an awesome way to display books in digital format. Books are in 3D and can be seen from the front, side, back and even inside, as it possib...

This is an awesome way to display books in digital format. Books are in 3D and can be seen from the front, side, back and even inside, as it possible to open the book and check the content we decide to put in them. Perfect for showcasing material for a bookstore or a library.

A gallery of images showcasing different effects applied with CSS3 filters. These include blur, sepia, brightness, color managing and more. Courtes...

A gallery of images showcasing different effects applied with CSS3 filters. These include blur, sepia, brightness, color managing and more. Courtesy of Raymon Schouwenaar from CSSDesk.

A cool responsive grid to display pictures. It includes a nice effect that allows images to open up on hover. Click and hold on an item to see it f...

A cool responsive grid to display pictures. It includes a nice effect that allows images to open up on hover. Click and hold on an item to see it full size. Uploaded to CodePen by Rémy Bach.

This is a great tool to hide a label behind an image, once we hover on the desired element, the image will turn and reveal what we had in the back....

This is a great tool to hide a label behind an image, once we hover on the desired element, the image will turn and reveal what we had in the back. Uploaded to CodePen by Rémy Bach.

Picture gallery that shows a book at the beginning. When clicked, it opens up to reveal a filmstrip with the im...

Picture gallery that shows a book at the beginning. When clicked, it opens up to reveal a filmstrip with the images available to see. Uploaded to CodePen by Burak Can.