Long ago I wrote a tutorial on how to make decorative image galleries using an extra <span> tag. It requires jQuery to append the span tag which isn’t quite user friendly. Today I’m going to share a better method without using Javascript. The same result can be achieved by using :before or :after pseudo element. The :before element is one of the commonly under used elements, but it is quite useful for adding additional elements or content. Learn it now and start using it.

View DemoDecorative Gallery

HTML

Below is a sample image gallery markup in a <ul> list.


<ul class="gallery clip">
	<li>
		<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
	</li>
	<li>
		<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt="image">
	</li>
	<li>
		<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
	</li>
</ul>

CSS

Below is the base style for the .gallery. The key property you have to add is relative position on the .gallery a element.


.gallery {
	margin: 0 0 25px;
	text-align: center;
}
.gallery li {
	display: inline-block;
	margin: 5px;
	list-style: none;
}
.gallery a {
	position: relative;
	display: inline-block;
}

:before element

Now I’m going to specify a 30 x 60px container with the paper clip background image to the a:before element. Note that I leave the content property empty in the CSS rule. Without the empty content property, the container will not appear.

before element

.clip a:before {
	position: absolute;
	content: ' ';
	top: -5px;
	left: -4px;
	width: 30px;
	height: 60px;
	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat;
}

Art Frame

You can use this trick to add any overlay graphic element on top. In this example, I just replaced the background image to an art frame graphic and adjusted the dimension and position.

art frame gallery

.frame a:before {
	position: absolute;
	content: ' ';
	top: -22px;
	left: -23px;
	width: 216px;
	height: 166px;
	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat;
}

HTML5 Gallery

Let’s create a more advanced gallery using HTML5 markups. In the example below, I have a <figure> tag wrapped around the image and a <figcaption> for image caption.

tape style gallery

<ul class="gallery tape">
	<li>
		<figure> 
			<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-4.jpg" alt="image">
			<figcaption>Image Caption</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-5.jpg" alt="image">
			<figcaption>Image Caption</figcaption>
		</figure>
	</li>
	<li>
		<figure> <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-6.jpg" alt="image">
			<figcaption>Image Caption</figcaption>
		</figure>
	</li>
</ul>

CSS

In the CSS, I added two :before elements: one on the <figure> element and another one on the <li> element. The overlay.png (mask image) is applied to the figure:before element and the tape graphic is applied on the a:before element.

art frame

.tape li {
	width: 170px;
	padding: 5px;
	margin: 15px 10px;
	border: solid 1px #cac09f;
	background: #fdf8e4;
	text-align: center;
	box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
}
.tape figure {
	position: relative;
	margin: 0;
}
.tape a:before {
	position: absolute;
	content: ' ';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/overlay.png) no-repeat;
}
.tape figcaption {
	font: 100%/120% Handlee, Arial, Helvetica, sans-serif;
	color: #787568;
}
.tape a:before {
	position: absolute;
	z-index: 2;
	content: ' ';
	top: -12px;
	left: 50%;
	width: 115px;
	height: 32px;
	margin-left: -57px;
	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/tape.png) no-repeat;
}

CSS3 Transform

In this gallery, I added a cork pattern background on the gallery and use transform property to rotate the images.


.transform {
	background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/cork-bg.png);
	padding: 25px;
	border-radius: 10px;
	box-shadow: inset 0 1px 5px rgba(0,0,0,.4);
}
.transform li {
	border: none;
}

Nth-of-Type

To make the image rotation look randomized and more natural, I applied a different rotation angle using nth-of-type.

transform gallery

.transform li:nth-of-type(4n+1) {
	-webkit-transform: rotate(2deg);
}
.transform li:nth-of-type(2n) {
	-webkit-transform: rotate(-1deg);
}
.transform li:nth-of-type(4n+3) {
	-webkit-transform: rotate(2deg);
}

Update:

I’ve updated the gallery demo and CSS so now the images are linked. Now the :before element is added to the tag.

73 Comments

Alexander
Sep 7, 2012 at 1:27 am

Looks great,
but why didn’t you use
.transform li:nth-of-type(2n+1) {
-webkit-transform: rotate(2deg);
}
.transform li:nth-of-type(2n) {
-webkit-transform: rotate(-1deg);
}

instead of

.transform li:nth-of-type(4n+1) {
-webkit-transform: rotate(2deg);
}
.transform li:nth-of-type(2n) {
-webkit-transform: rotate(-1deg);
}
.transform li:nth-of-type(4n+3) {
-webkit-transform: rotate(2deg);
}

?

Thanks for your awesome posts!
Alexander

glow
Sep 7, 2012 at 3:15 am

Maybe the initial idea was to give a different angle to 4n+3 so it look more random ?
something like :
.transform li:nth-of-type(4n+1) {
-webkit-transform: rotate(2deg);
}
.transform li:nth-of-type(2n) {
-webkit-transform: rotate(-1deg);
}
.transform li:nth-of-type(4n+3) {
-webkit-transform: rotate(1deg);
}

Boothy
Sep 7, 2012 at 1:58 am

You’ll add a ‘what’ pattern?

Mike Malott
Sep 7, 2012 at 5:11 am

Haha I caught that too but a great tutorial nonetheless.

Nick La
Sep 7, 2012 at 10:51 pm

Thanks. It is fixed now.

Web Design in Pune
Sep 7, 2012 at 3:00 am

one with tape looks great.. It will give very natural look to the gallery..
Thanks for sharing..

Petr Jirasek
Sep 7, 2012 at 5:41 am

Really, it looks great! Thanks for sharing.

AbstractAlgorithm
Sep 7, 2012 at 5:44 am

Nice. :before is really cool.
Nice pattern. ^_^

Furiant
Sep 7, 2012 at 6:40 am

I’d argue that the most valid (if not the most common) reason *not* to use :before is that it doesn’t inject any actual HTML.

For instance, you could place a paragraph asserting that labels with asterisks indicate required input, and then use :before to append the asterisk to labels with a ‘.required’ class.

The asterisk shows up visually, but if you view the source it’s not there (so a screen reader would have no idea that the field was required).

That point actually works in favor of this technique, however. Great post.

Nick La
Sep 7, 2012 at 10:54 pm

In this case, the :before element is used for decorative reason. It doesn’t affect the usability at all.

Furiant
Sep 11, 2012 at 7:01 am

That was my point: why it’s underutilized, and how it works in favor of this technique. Again, great job.

Jonny
Sep 7, 2012 at 7:28 am

Wouldn’t javascript statistically have a greater reach than this?

CeeVee
Sep 7, 2012 at 8:21 am

In the examples using the tag… why isn’t the text selectable?

AbstractAlgorithm
Sep 7, 2012 at 9:49 am

Works in Opera, it doesn’t work in FF, dunno for Chrome.

Peter Mumford
Sep 7, 2012 at 8:35 am

Sweet looking, but are can these thumbnails be linked to larger versions? The demos are not linked. I find that if you overlay something on top of a thumbnail, you can’t get to the link. And an un-linkable TGP isn’t very useful.

Nick La
Sep 7, 2012 at 11:56 pm

Certainly, the images can be linked. I’ve updated the demo and tutorial to reflect this. Now the :before element is added to the <a> tag.

Milan
Sep 7, 2012 at 11:57 am

awesome post…thanx for the post :)

Dan Bakan
Sep 8, 2012 at 7:19 am

Very well written, Nick. Using the nth-child selector to vary the rotation really helps to achieve this random look. I’d suggest to also use three different tape images to take it even further ;)

Web dizajn
Sep 10, 2012 at 5:46 am

For me this is perfect…i dont make bear from fly.

Website Designer Cardiff
Sep 10, 2012 at 2:54 pm

This will be useful for when i finally get around to filling out the profile section of my site!

Many thanks.
Alex.

Alquiler yates Ibiza
Sep 10, 2012 at 3:14 pm

For instance, you could place a paragraph asserting that labels with asterisks indicate required input, and then use :before to append the asterisk to labels with a ‘.required’ class.

The asterisk shows up visually, but if you view the source it’s not there (so a screen reader would have no idea that the field was required).

Debbs Hosting
Sep 10, 2012 at 7:47 pm

I’m not into CSS much because I can’t memorize all of the right codes to use. But I’m trying to learn it as long as I have some codes to copy from by my side. The gallery is very attractive, by the way. Do I have to create a child theme to be able to tweak the CSS code of my theme for this one?

desenvolvimento de sites
Sep 11, 2012 at 8:33 am

An incredible result.

Tim
Sep 11, 2012 at 10:45 am

The demo doesn’t do anything. It just links to the Themify site.

Tim
Sep 17, 2012 at 1:23 pm

Still not fixed. I’d really like to see what this gallery does.

Alquiler yates Ibiza
Sep 11, 2012 at 11:04 am

he asterisk shows up visually, but if you view the source it’s not there (so a screen reader would have no idea that the field was required).

Web Designing
Sep 12, 2012 at 2:37 am

Very nice post thanks for sharing this incredible post.
Thank You very much.

CiNiTriQs
Sep 12, 2012 at 6:22 am

Great tutorial, nice screenshots and examples/demo’s. As usual, be proud of this one because we all like it ;).

Zion
Sep 12, 2012 at 7:02 am

Very nice this will be very useful ! Thanks for sharing

Thanos
Sep 12, 2012 at 1:35 pm

I have created some tools for web developers that apply styles of this kind to images. My experience says that in order to create styles and effects like that, you need 3 things: a) CSS3, b) Javascript (jQuery) and c) decorative/assistant images.
The best case would be to use only CSS3 but at the moment the usage of the other two is necessary if you want to create impressive styles.

Theo
Sep 13, 2012 at 9:44 am

I can still remember part one. The first thing that came to my mind was to ad transform:scale(1.02); on hover. Great tutorial!

Mohit Seth
Sep 13, 2012 at 11:50 am

This is a good article and I have been using :before and :after a lot in my design. The only concern using it that it is compatible IE8+ so you need to have some fallback if you have IE7 users.

Jeroem Douthit
Sep 14, 2012 at 1:40 am

It is a very nice gallery for me! As a web designer, I want a gallery like that..

blitz
Sep 14, 2012 at 2:31 pm

The only bit that doesn’t make sense, is why you’ve used masking tape and not pins to stick pictures to a cork board! ;-)

Good little demo.

joomla websites
Sep 14, 2012 at 11:54 pm

Nice.The information you shared is very helpful for designers i am also a designers & your information will help me a lot.
Thanks once again.

Mark Wong
Sep 18, 2012 at 4:26 pm

Cool tips, Thanks for sharing!

ajit
Sep 20, 2012 at 4:53 am

wow , nice tips for web designig..
thanks for sharing..

Wordpress installations
Sep 20, 2012 at 7:49 pm

Choice, I really like the sticky tape idea. Thanks for sharing!

geraldine
Sep 20, 2012 at 10:05 pm

This is a wonderful tutorial. I hope to incorporate this on my blog!

Donald
Sep 21, 2012 at 11:50 am

I remember the original tutorial and have been using it. Thanks for the updated and improved method. I love the designs on your site. Kind regards Don

Benefits of paid Web Design Vs Do it Yourself
Sep 22, 2012 at 3:16 am

Your website says a big mess on the game, and you can reach the number in between, and consumers get a deal with another on your website. It is very affirmable on the number of a website on your own, but no choice e’er beat.

A web designer has professed, the perception of most of what consumers turn to and implementation of your entire home, which they are perceived to focus. They are also in how to improve various aspects of your website to make sales explode just qualified.

jeu video
Sep 24, 2012 at 7:28 am

very nice, thank you

ambroisie
Sep 24, 2012 at 8:38 am

Great !

rémy
Sep 24, 2012 at 10:22 am

nice one. lovely desinged !

Andrea ArtReplica
Sep 25, 2012 at 1:54 am

Wow, Thees looks totally great.
I have been improving our gallery lately, but I can see, that I will improve some more soon using some of these ;)
Thanks for sharing!
Andrea

Website developer in Pune
Sep 25, 2012 at 8:55 am

Very helpful.. Thanks..

Sitebee
Sep 25, 2012 at 9:56 am

Very nice, some interesting ideas to take away from those.

Top 10 Lists
Sep 25, 2012 at 1:19 pm

Thanks for the detailed and helpful tutorial. This decorative CSS Gallery looks stunning and eye catchy.

Gavin
Sep 27, 2012 at 12:19 pm

Nice article will definitely give a try to it and will try to make something creative for my website.

Deepak Kumar
Sep 28, 2012 at 6:09 am

thanks for shearing such a fascinating article.

Scriptlook
Oct 1, 2012 at 9:38 am

Great post bro ,realy nice work….bravo

Mark Pritchard
Oct 3, 2012 at 11:19 am

As your first part tutorial this is also very informative. This tutorial really helps me lot to learn CSS.

businessfied
Oct 3, 2012 at 12:53 pm

well its great that such a beautiful css gallery can be built without using javascript. I guess Html 5 technology usage make this gallery appealing and non presence of java script will improve load times.

risedream
Oct 3, 2012 at 12:59 pm

Thanks for sharing this useful tutorial. I guess even beginners will find it useful as this gallery has simple CSS and Html coding.

Deepti
Oct 4, 2012 at 6:23 am

Very Useful and informative blog. thanks for sharing such a nice informative article here.
http://www.rbiwebdesign.com/

Scriptlook
Oct 7, 2012 at 8:38 am

The only bit that doesn’t make sense, is why you’ve used masking tape and not pins to stick pictures to a cork board! ;-)

Web Design Kipo
Oct 10, 2012 at 10:52 am

Wow it is unique gallery. Thank you for this knowledge.

Magento Development
Oct 11, 2012 at 5:27 am

Great Post!!! All Graphics are Really Great…I Appreciate Your Creativity..Keep Posting..Thanks…

web design html5 css3
Oct 11, 2012 at 5:55 am

Really awesome and great post … it’s help me I found what am googling

Alquiler yates Ibiza
Nov 18, 2012 at 6:07 am

Please can you help me by giving some tips?
thanks…

visitor
Nov 19, 2012 at 5:12 am

You forgot to the wrap your img tag with an a tag.

Piotr
Nov 21, 2012 at 3:41 pm

I add other image effect here:
http://guistyles.com/index.php

Didn’t get that advanced solutions so i made simple one.

Lorraine
Nov 23, 2012 at 3:04 am

Just getting ready to redesign my own site. I think I’ll give the transform a try out there…

Joe
Nov 27, 2012 at 5:42 am

Serif fonts are helpful for web designed. It can very colorful designed make the Web Page. I appreciated and always prefer Serif fonts. Thanks for this font with create the blog letter and comment.

aditya
Dec 3, 2012 at 12:31 pm

Many many thanks…Brian Helped me while creating portfolio page and your post helped me while designing it…..

John
Dec 3, 2012 at 2:56 pm

Fantastic, the paperclip and tape look great, I have been looking for an easy way to style the many gallery photos that we have on our website and this is just what I needed… Thanks

Amila
Jan 31, 2013 at 12:45 pm

Wonderful. Im going to do this now.

Afzal
May 26, 2013 at 2:16 am

Your collection of CSS images are stunning.These all are awesome. I really like it ..
Thanks for sharing.

Get your home cleaned
May 26, 2013 at 8:01 am

Hello !
It’s totally new to me. I really liked :before element. It is too much impressive. The way you have explained each and every step is appreciable.
Thanks a lot.
Get your home cleaned

ThemeSquirrel
Jun 2, 2013 at 12:39 am

Awesome tutorial! I’ve been trying to figure this out for a while, Thanks for sharing!

online careers
Jun 7, 2013 at 3:31 pm

Hello! Do you know if they make any plugins to assist
with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m
not seeing very good gains. If you know of any please share.

Appreciate it!

online careers

mua may chay bo o dau
Nov 26, 2016 at 1:48 pm

This is my first time visit at here and i am genuinely happy to read everthing
at one place.

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.