Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).

View Demo Gallery

Download Demo ZIP

What Are The Benefits Of This CSS Trick?

  • Saves Time — You don’t have to manually create the decorative template in Photoshop and export the individual image.
  • Keeps Original Source Images — So you don’t have to worry about changing the design theme in the future.
  • Very Flexible — You can have a completely different look and feel by just editing the CSS.
  • It Works on Any Site — This CSS trick works on any type of site, with any image size.
  • Cross-Browser CompatIble — It has passed the test on most browsers (Firefox, Safari, Opera, and even the "buggy IE6").

Basic Concept (see demo)

You need to insert an extra <span> tag within the <div> tag, with which we’ll apply a background image to create the overlaying effect. If you don’t like to have an empty span tag, you can append the span tag by Javascript (I’ll show you how later in this tutorial). Here is how it works:

Basic Concept

Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. You can position the span element anywhere you want by using the top and left property.

IE PNG Hack

To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Download a copy of iepngfix.htc and insert the following code in between the <head> tag:

<!--[if lt IE 7]>
<style type="text/css">

  .photo span { behavior: url(iepngfix.htc); }

</style>
<![endif]-->

Look and Feel

To change the look and feel, simply edit the CSS specifications of the span element. Click the image below to see the demos I have. To show you how flexible it is, I’ve created 15 different styles (notice the HTML markup is same).

Demo screenshot

The jQuery Solution (see demo)

I know some of you (particularly the web accessibility fans) don’t like to have an empty span tag in the markup. Well, I’ve solved this issue by using jQuery to append the span tag to the source code. Insert the following code in between the <head> tag:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   
  //prepend span tag
  $(".photo a").prepend("<span></span>");
								  
});
</script>

#1. Simple Gallery (see demo)

Let’s take the technique from the previous step and apply it to create a photo gallery.

Demo 1

#1b. Mini Icons (see demo)

This example shows you how to position different icons on top of each photo (note: an extra CSS class name is required in the span tag).

Demo 1b

#2. Photo With Text (see demo)

This example shows you how to create a gallery with linking text (em tag).

photo with text

#2b. Popup Text (see demo)

popup text

#3. Mini Paper Clip (see demo)

Mini paper clip demo

#4. Cork Board Gallery (see demo, IE6 version)

cork board gallery

sIFR Version (Flash Text Replacement) (see sIFR demo)

This example uses sIFR to replace the em text with a handwritten font (notes: in this demo, the span tag is appended by jQuery)

sIFR demo

#4b. Cork Board With Masking Tape (see demo, IE6 version)

Demo 2b

#5. Art Gallery – Black Frame (see demo)

black picture frame

#5b. Art Gallery – Gold Frame (see demo)

gold art frame

#6. Grungy Watercolor (see demo)

grungy watercolor

sIFR Version (see sIFR demo)

sIFR demo

#7. Glossy Style (see demo)

glossy style

#8. Wood Panel Gallery (see demo)

Finally, this example demonstrates how you can apply the background image to all elements to create a wood panel gallery: ul, li, and em.

wood panel

Final Remarks

As you can see, this CSS trick is very flexible. So, be creative! Feel free to incorporate the graphic images and CSS styles in this tutorial to create your own.

549 Comments

SpinX
May 27, 2008 at 5:54 pm

Really great tutorial, just what I needed for my next project.

Todd
May 27, 2008 at 6:06 pm

Very nice tutorial! Such a simple technique, but it makes a huge difference.

David Couillard
May 27, 2008 at 6:15 pm

Really nice stuff man! Thanks for sharing these ideas and info… I’ll definitely use this technique…

Caesar
May 27, 2008 at 6:17 pm

Wow. excellent tutorial, great variety of styles, and so easy.

Jon Hughes
May 27, 2008 at 6:18 pm

I’m one of those that are opposed to the empty element, and I don’t think embedded JavaScript is the answer :) But it’s a very nice tutorial – thanks!

Sean
May 27, 2008 at 6:24 pm

Wow, really cool effect. Thanks for this one.

Jerlyn Thomas
May 27, 2008 at 6:26 pm

Fabulous! Great tutorial, will definitely use.

Shortshire
May 27, 2008 at 6:29 pm

That is a great tutorial. I will probably start using techniques like that for some of my photos. Thank you and the presentation is easy to follow.

Eric-from-Boston
May 27, 2008 at 6:33 pm

nice tutorial… i haven’t yet jumped into using PNGs yet, didnt know much about their compatibility and I knew there would probably be a hack to fix it….gotta love those hacks…PNGs may now come into my workflow.

thanks.

Diego
May 27, 2008 at 6:33 pm

your examples are best thanks

Ken Nickless
May 27, 2008 at 6:53 pm

How simple! And no need to modify the source image.Great tip.You always come up with the goods. Thanks

Gilbert
May 27, 2008 at 7:09 pm

Wow. Really nice Nick. Keep up the great work.

Bedrich
May 27, 2008 at 7:12 pm

Very useful tips, thanks!

Marianne
May 27, 2008 at 7:32 pm

Great tutorial. I will use this for my next project!

Keep up the good work. I love your site!

Maicon
May 27, 2008 at 7:43 pm

really good!

Miiitch
May 27, 2008 at 7:49 pm

This is a great tutorial!
Would is be possible to do a tutorial on how you made all those span images? The tape, the pin, the frame, etc.?

That would be epic! Thanks.

Travis
May 27, 2008 at 7:59 pm

Before with one of my project, I was required to made a frame around a photo slideshow, so I put a PNG as a frame (with transparent center) on top of the photos. It looks perfect in FF and IE7, however I can not get it work in IE6 even with PNG fix (js stype).

So I end up using 4 GIFs wrapper around the photo, looks the same but not as code-friendly.

I might try out your method of IE PNG fix to see if this can be THE ONE! o_0

great tutorial, always enjoys it =)

Daniel Holter
May 27, 2008 at 8:01 pm

Wow, really really top notch tutorial, man. Just like all great tuts I read, you make me want to go redesign my whole site right now using this effect. :)

Thanks!

The Frosty
May 27, 2008 at 8:13 pm

Wow thats awesome, I am going to think of something I can use that for!

Emilio (Brazilian)
May 27, 2008 at 8:32 pm

But this is semantics? Use span this way is semantic?

Allen
May 27, 2008 at 9:11 pm

I really like this blog, very helpful.

The tips awesome !

Majesticskull
May 27, 2008 at 10:37 pm

Really nice! I love! Thanks for the great solution! Nice, nice, nice!

mcm69
May 28, 2008 at 12:51 am

An excellent trick, thanks.
Regarding semantic value – I don’t really understand how the hell an empty span can do anything bad. If you have no CSS (like, you are Googlebot), you don’t see it.

Fabian
May 28, 2008 at 1:49 am

Very nice tutotorial! Dugg ;)

D. Carreira
May 28, 2008 at 2:16 am

Thanks for sharing this! Great!

Daniel
May 28, 2008 at 2:19 am

Great work! Common techniques, combined to stunning results!

Naki
May 28, 2008 at 2:21 am

Great Tutorial! It gives lots of ideas, thanks ^^

Pavel Ciorici
May 28, 2008 at 2:22 am

Good work Nick!

Andris
May 28, 2008 at 2:24 am

Very creative idea! I like it, thanks!
– Andris

Bram
May 28, 2008 at 2:24 am

Very, very handy trick! Thanks!

Bruce Alrighty
May 28, 2008 at 2:33 am

Nice job. I am work on a new project and I think this will be very useful.

shabith ishan
May 28, 2008 at 2:33 am

two thumbs up nick!!! :P

Carlos Leopoldo
May 28, 2008 at 2:58 am

Very useful, but it don’t protect the images when you want to add a watermark of copyright ;-)

David
May 28, 2008 at 3:05 am

I’ve done something similiar for the site italian-furniture.it but this solution is much better! Great work!

Mick
May 28, 2008 at 3:19 am

Great stuff, only your pop up demo doesn’t work in IE6.. the problem is none of the png fixes out there can make png images hover. If anyone knows one that does, please comment.

Greets Mick

linzprod
May 28, 2008 at 3:20 am

Very nice idea. Keep up the good work.

Tom
May 28, 2008 at 3:46 am

Great work, and thanks for the accessible solution: very nice.

lex
May 28, 2008 at 5:28 am

omg! thank a lot men, i only have one doubt. how did you make that Polaroid texture? ( i mean, the shadows in the paper. photoshop?)

m4c
May 28, 2008 at 5:48 am

Great! Thx!

Christina
May 28, 2008 at 5:48 am

I love this! I really like the design that has ‘photo corners’, I will definitely be refering back to this tutorial A LOT!

Tommy_Gun
May 28, 2008 at 6:22 am

WOW… this is beautiful thanx.

Paul
May 28, 2008 at 6:37 am

Great work!

Cleo Morgause
May 28, 2008 at 6:50 am

Great tutorial and a trick basic.
Congratulations!

Claudia Snell
May 28, 2008 at 6:52 am

This is a great tutorial. I’ll be using this right away. Nicely done. And thank you for all the variations, especially the accessibility option. Fantastic!

M.Mahgoub
May 28, 2008 at 7:17 am

Thanks for the tut man. and for the PNGs.

Josh
May 28, 2008 at 7:20 am

Terrific tutorial. Thanks!

Kurt Cruse
May 28, 2008 at 8:07 am

The beauty of this is that it’s so simple but so effective, the mark of a true creative. Thanks for sharing your insight.

Michael Paul da Rosa
May 28, 2008 at 8:09 am

Excellent!!! Thanks for sharing!!!!!!!!

Spanna
May 28, 2008 at 8:15 am

Oh my goodness. You are amazing. For so long I have been looking for something like this. I have put off making myself a new online portfolio for a couple of years just because I know how long it takes to format and export all those images… and with my tendency to get bored of my interface designs quite quickly I know I am just going to have to do it all again in no time.

Thankyou so much! This is one of the best tutorials I have ever seen.

Graham Strong
May 28, 2008 at 8:47 am

Great tutorial! I love how fast the hover graphics activate as well — very slick gallery!

~Graham

Javier Tapia
May 28, 2008 at 8:53 am

Notable tutorial. ¡¡Muchas gracias!!

Radek K.
May 28, 2008 at 8:55 am

Nice tutorial.

Drupal Museum
May 28, 2008 at 9:04 am

Thanks for the tutorial.

D.A.T.
May 28, 2008 at 9:06 am

Nice. Thanks

Pedro Rogério
May 28, 2008 at 9:06 am

Wowwwwwwwww, very good tips!!!

ed
May 28, 2008 at 9:22 am

how elegant and simple. will definitely use this technique!

Christian Mejia
May 28, 2008 at 10:55 am

Holy Cow! This is great! Thank you for posting this, now I need to get to work!

Vrungel
May 28, 2008 at 12:00 pm

Thanks for tip, nice and simple!
It helped me achieve desired look of banner image. Although I ended up using nested tags rather then extra tag but the idea was the same.

revy
May 28, 2008 at 12:27 pm

I love the IE png fix. I haven’t seen that before. I will probably give that a try.

m4rc0
May 28, 2008 at 12:57 pm

WoW! Great tutorial! Thanks, thanks, thanks! :)

Domo
May 28, 2008 at 1:24 pm

Wow, amazing! I’m sure i’m going to use it in my next work. Thanks!

Tor Løvskogen Bollingmo
May 28, 2008 at 1:55 pm

Nick, have you had any luck getting the PNG-fix to work when you are repeating background-images (PNGs)? That’s what all the solutions, and this behaviour lacks. Is there a solution?

Luca
May 28, 2008 at 3:09 pm

Cool Cool COOL!!!

gen
May 28, 2008 at 3:18 pm

wow thanks a lot Nick! this is amazing! I going to try and rework my gallery to use this technique.

Kynes
May 28, 2008 at 3:58 pm

This ‘trick’ is similar to the one you used in ‘Advanced CSS Menu’, but it’s still so genius ! I just love this simple css trick and I’m always thinking to it when I see lines & lines of JavaScript for the same result (and not always with the same compatibility :D) Thank you for sharing all your knowledge, and for the quality of your posts.

PS : By the way, I would be interested in knowing how you’re doing this ‘Comment Preview’ ^^

PS 2 : Sorry for my English, I’m French :/

tim
May 28, 2008 at 6:52 pm

Thanks! I had been planning to do this to a site I designed–now I don’t even need to think about how. :)

Eric
May 28, 2008 at 7:14 pm

does anyone know if this technique works in html emails?

Benjamin Butgusaim
May 28, 2008 at 7:30 pm

Hot diggety, that is some phenomenal work there, lou!

Aaron Mills
May 28, 2008 at 10:27 pm

Hey I love this.. great work.. thanks!

Panther
May 28, 2008 at 10:54 pm

Whoa! Not only did you show me how to do a trick I’ve been plotting in my head, you also fixed the annoyance of IE6’s PNG problem. Thanks for this double whammy of an article, cheers!

veerendra
May 28, 2008 at 11:38 pm

hi
this is just amazing and inspiring tutorial .. thank you very much !

Nouman Saleem
May 28, 2008 at 11:43 pm

so helpful! Thanks for this, I will really be using it :)

Louie
May 29, 2008 at 2:09 am

This is awesome tutorial. We don’t need to edit the image. Thanks for this :)

Joefrey Mahusay
May 29, 2008 at 2:10 am

I will use this techniques soon. Thanks a lot :)

Roland
May 29, 2008 at 2:21 am

Thx for this great idea, I love it. It is really flexible.

Antoine
May 29, 2008 at 3:03 am

Wow, this is great stuff!!
Bookmarked at the moment ‘cos I’m at work but I’ll check that as soon as I get home !!

Thanks a lot !!

Jay Salvat
May 29, 2008 at 3:46 am

I use the same kind of effect and technic on my new website for a couple of week. http://www.jaysalvat.com/. Glad to see the same idea here.

Gaia Bonetti
May 29, 2008 at 4:20 am

Really Amazing tutorial, thanks!!!!!!!!!!! :D

InvisAble drummer
May 29, 2008 at 6:26 am

Thanks this is great, please do more of these!!!

bbx
May 29, 2008 at 6:51 am

The possibilities of this trick are unbelievable. I really love the design and flexibility of it.

Jcxnet
May 29, 2008 at 7:42 am

That’s amazing !! maybe I would use it in my future projects, what kind of license have it?

SARAH
May 29, 2008 at 7:53 am

wow…Great tricks. I am going to try this. Thanks for sharing

albert lumu
May 29, 2008 at 8:15 am

This is astounding!

Thanks!!!

Vipul
May 29, 2008 at 8:19 am

Great work…. Its really gonna help me in my new website… Thanks for sharing :)

brian
May 29, 2008 at 9:16 am

Beautiful tutorial, great examples. I’ve been looking for a way to do such an effect. Thanks. =)

Arcadio
May 29, 2008 at 9:30 am

Wow … amazing….

Felipe
May 29, 2008 at 11:11 am

this is great!!!!
I wish you could post tutorials more often.

APM Solutions
May 29, 2008 at 11:59 am

Great tutorial. I can see this being used a great deal. Thanks.

Stacey Star
May 29, 2008 at 1:12 pm

Wow! I’m just starting out and looking for all sorts of tutorials. This one is amazing. And you write so that it makes sense. Thanks for that!!! Please keep these coming.

Atakan
May 29, 2008 at 2:18 pm

Amazing!
This is the real proof of the what you are able to do in CSS is boundaried with your imagination.

jarreweb
May 29, 2008 at 5:12 pm

how to work with it if there are different images size on a page ?
for example, i’m working on a portal website and our clients send us pictures with many many different size (width and heigh)
thanks

Real Estate Graphic Design
May 29, 2008 at 5:32 pm

wow nick, you amaze me again with such forward thinking.

Bel Koo
May 29, 2008 at 10:04 pm

How’s wonderful work~ thanks for sharing!

Lance
May 30, 2008 at 12:22 am

Simple yet enough to make me nod and say… “aha!” :)

Kevin Kashou
May 30, 2008 at 1:35 am

Hi Nick,

I implemented the png hack and it works really well with background images but for images that are on the page itself; it displays a box with an x on it. What could be the cause for that?

Ricardo
May 30, 2008 at 2:50 am

Great tutorial with nice examples.

TmiY
May 30, 2008 at 4:39 am

Great post!
Very useful and good to know that we can use this with IE6 safely.

Thanks!

ocube
May 30, 2008 at 5:51 am

I am just about to start on a web portfolio for a friend and this will surely come in handy. Thanks alot for this, your site has always been an inspiration. Keep up the good work

dbernal31
May 30, 2008 at 8:45 am

Muchas graxias muy buena esta web

Strike
May 30, 2008 at 8:53 am

Great tutorial! Thanks a lot!

gen
May 30, 2008 at 9:18 am

wow! thanks a lot for this tutorial Nick. I really found this helpful and will try it out on my site soon.

Richard@Home
May 30, 2008 at 10:11 am

Gorgeous, simple gorgeous :-)

Alex
May 30, 2008 at 10:11 am

My god your slick! Thanks for another excellent tutorial.

rruben
May 30, 2008 at 10:58 am

UberCool!!! Thanks for the great tips again. You really bring live to what css is.

Betovarg
May 30, 2008 at 11:46 am

Man I love this website

PP
May 30, 2008 at 4:04 pm

The best tutorial I have ever seen! Appreciate your sharing and time~

KEISYUU∞
May 30, 2008 at 11:36 pm

It’s so great, and cool. I love it.

Vlad
May 31, 2008 at 1:37 am

Thanks!
The article is really great and helpful.
I have one question…
I tried to use the IE hack in the past, but it never worked, could you please explain the code you use? why is there [if lt IE 7] if the hack is for IE 6? (7 works fine with pngs)

Thanks

Tanju YILDIZ
May 31, 2008 at 4:26 am

Thanks, great tutorial.

Çetin Oğuz
May 31, 2008 at 4:27 am

Great tutorial! Thanks a lot!

JT
May 31, 2008 at 8:19 am

Wow… Simple, flexible, effective, wonderful. Thank you!

knight online
May 31, 2008 at 9:24 am

Thanxxx

Roy
May 31, 2008 at 3:26 pm

So Great!
Thank You!

bweb
May 31, 2008 at 3:52 pm

Thanks man.

digitalscrap.net
May 31, 2008 at 4:19 pm

I think I may be living on this site! Where can I sleep for the nite? :)

Bacardo
Jun 1, 2008 at 1:30 am

Very useful, clear and clever. thanks for share!

Regards from Argentina!

Bacardo.

CSS 2.0 Experts
Jun 1, 2008 at 7:27 am

Really innovative tutorials for CSS 2.0 experts…!

JamieO
Jun 1, 2008 at 10:53 am

@Vlad – The ‘lt’ in [if lt IE 7] stands for ‘if less than IE7’ meaning it will apply the changes to any version of IE lower than 7.

I agree that this tutorial is fantastic. I’ve done similar things on a few other sites, but the variety and simplistic implementation speaks volumes to your talents.

The biggest challenge one faces when using a visual style of this nature is to ensure that your thumbnails or photographs are all the exact same dimension. Another option would be to have 3 specific sets of dimensioned frames for square, tall rectangles and wide rectangles which get applied based on a class on the span.

To keep things simple from a code / content point of view, you could apply the class to the image itself in your content editor / CMS, and use a similar jQuery Solution to inspect and remove the class from the image, then apply it to the span to produce the matching frame.

Posicionamiento Web
Jun 1, 2008 at 11:47 am

Fantastic!
Thanks for sharing your knowledge !!!
Cheers

David
Jun 1, 2008 at 4:03 pm

Absolutely brilliant!

Nice work once again

silva
Jun 1, 2008 at 7:17 pm

Del putas

plakali esanjor
Jun 2, 2008 at 4:13 am

looks very good

Antoine
Jun 2, 2008 at 4:41 am

This is GREAT stuff!
Just checked a few things at home and I think I’ll use this to automatically apply style to pictures in my blog posts!!

Thanks a lot again!

Alis
Jun 2, 2008 at 6:27 am

Great job, this gallery will be really useful for my artfolio!
This is really great!

Btw… it would be great to have also a javascript like lightbox to see the image but with a description included.

NGP
Jun 2, 2008 at 1:05 pm

Hey! Awesome tutorial once again, will be very useful in the work I am doing right now. I just wanted to point something out. Under the “Basic Concept” header where the initial bit of CSS code is with the photo beside it, the test is not selectable for cutting and pasting. (I’m using Safari 3.1.1 (525.17) for PC.) Just makes it harder to follow along with the tut because of switching back and forth to copy the type.

Thanks for an awesome site, I always look forward to updates

NGP

Caleb
Jun 2, 2008 at 4:44 pm

Wow, what a little CSS love can do to brighten up a page! Great job once again, I’m already adding this effect to my site :).

caocao
Jun 2, 2008 at 8:13 pm

good !

resun
Jun 2, 2008 at 10:55 pm

very good and useful,thanks:)

manhkhanh
Jun 3, 2008 at 3:22 am

looks very good

Phillipe Calmet
Jun 3, 2008 at 8:56 am

Great work there. :D
Looks very good and quite easy to apply…

kicek_
Jun 3, 2008 at 9:08 am

great job man.
looks very nice.

Sophia
Jun 3, 2008 at 10:40 am

Thanks, love ur site !!

Jonas
Jun 3, 2008 at 12:16 pm

Thanks a lot for this great job!

Camilo
Jun 3, 2008 at 2:28 pm

Great galleries!! Really impresive. Thanks for sharing!!

Salvatore
Jun 3, 2008 at 6:06 pm

big deal, I’ve done that for years! :D

Robbi
Jun 3, 2008 at 7:43 pm

@Salvatore: Yep, but I doubt you’ve done it as good xD

Sebastian
Jun 4, 2008 at 2:11 am

Wow, great tutorial. Really impresive :-) Thanx a LOT!!!

Cody
Jun 4, 2008 at 2:52 am

Great post!!! extremely useful.

Salvatore
Jun 4, 2008 at 6:59 am

@Robbi: probably not in terms of applied design, but the code is just that, it couldn’t be any different/harder/easier. It’s just common css. Good to see people shares stuff like this anyway.

senem
Jun 4, 2008 at 9:18 am

thanks great galleries…very nice:)

Jorre
Jun 4, 2008 at 9:33 am

too bad this isn’t working on IE6. Ok, it shows up alright, but hovering isn’t working. Thanks for the great tutorial though!

twotwo
Jun 4, 2008 at 10:35 am

Great tutorial! I’ll use it on my websites!

Patsy
Jun 4, 2008 at 12:37 pm

Once again, a great tutorial!

karl
Jun 4, 2008 at 5:38 pm

Instead of the htc hack I’m using the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(); in css

imaginepaolo
Jun 5, 2008 at 5:51 am

Great, great!

bybash
Jun 5, 2008 at 7:37 am

thanks buddy,really useful article.

James Bakdwin
Jun 5, 2008 at 2:13 pm

Very clever and impressive stuff! Will certainly be trying this out on a future project.

hediej
Jun 5, 2008 at 3:45 pm

can it be done if the ‘span’ image is a transparent .gif instead of .png?

Web Design Hobart
Jun 5, 2008 at 10:13 pm

Great little tip and very usefull to create some image overlays.

Bleyder
Jun 6, 2008 at 8:22 am

Great and helpful inspiration!!

Erik de Vreede
Jun 6, 2008 at 9:36 am

Way to go with the website man! it’s rocking.

Zeb
Jun 6, 2008 at 10:15 am

Wow I’m looking for a kind of gallery, thanks Nick !!

Photo Gallery
Jun 6, 2008 at 12:22 pm

Cool CSS effects…!

andrew
Jun 6, 2008 at 12:57 pm

the code is not validated when using the jquery script in the head section

ifx
Jun 6, 2008 at 7:54 pm

Hi, technique of using shadows/gradients thru 24bit transparent png with changing colors under png is also nice way how to use htc script. Alternative script for use could be this one: http://www.maptales.com/styles/default/css/pngBehaviour/pngbehavior.html
But both of these scripts doesn’t work with background position and IE 5.5 and lower are out (but who cares about win 98 users these days? Someone with conditional comments). And when I tried to “rendering by htc” all pngs on page, it seems like “flicker” to me in IE…
Thanks for handy article with beautiful examples! ♥

Giuseppe
Jun 7, 2008 at 4:25 am

Thanks a lot for this tutorial-That’s a nice sharing!

ffranz
Jun 7, 2008 at 8:22 am

Great beautiful decorations, and interesting tutorial!
You are a great master…

Welcome to Paradise
Jun 7, 2008 at 9:18 am

This is an impressive css photo gallery. Thanks for sharing this. The results are just awesome. Cheers.

teles
Jun 7, 2008 at 1:35 pm

Thanks a lot for this tutorial, very nice !!

taylan
Jun 7, 2008 at 3:38 pm

This is very cleverly. Thank you for sharing.

Hiren Mehta
Jun 9, 2008 at 2:06 am

Cool gallery:)

lynsey
Jun 9, 2008 at 8:21 am

Thanks for this! it’s really useful!

狂舞网络
Jun 9, 2008 at 9:20 am

Thanks a lot for this tutorial-That’s a nice sharing!

Brian
Jun 9, 2008 at 1:09 pm

I have been waiting for this tutorial for five years! You are AMAZING! Thank you.

Nick
Jun 9, 2008 at 1:13 pm

Very cool! This technique will come in very handy. Thank you!

LifeSucks
Jun 10, 2008 at 4:06 am

Hy! Sometimes your life sucks?
Visit my website & submit your own stories! Have fun! / http://www.life-sucks.tk
Bye

slayaz
Jun 10, 2008 at 4:21 am

Awesome! Not only are your illustrations utterly amazing, but your CSS is l33t as well.

I want to be you!

I now feel completely inadequate…

Orkan
Jun 10, 2008 at 2:38 pm

Very useful thanks for this tutorial.

naran_ho
Jun 11, 2008 at 6:21 am

mmmmm, really useful, thanks nice work

Peter
Jun 11, 2008 at 11:39 am

Why do you need the span? If it causes problems and you need to use a javascript to correct it would it not be better to put the image itself in there?

.photo {position:relative; width:180px; height:130px; margin:20px;}
.photo img {border:none;}
.photo .pin {position:absolute; z-index:2; width:28px; height:21px; top:-12px; left:90px;}

Slightly change your html


Of course you would need to change the IE conditioner

.pin { behavior: url(iepngfix.htc); }

This way you do not neet to include the jQuery Solution

Great article as always, it is a very useful tecnique and has multiple application fields. I recently designed a shopping cart with the product photos inside a heart.

Peter
Jun 11, 2008 at 12:17 pm

Sorry about that, the html is something like this:

Peter
Jun 11, 2008 at 12:20 pm

I’m sorry about all the posts, the preview shows up fine but it removes the html even in the code tags…

Peter
Jun 11, 2008 at 12:25 pm

I can’t get this to work so I uploaded it and here is a link:
http://www.peweedesign.com/embarrasing.htm

Luke
Jun 12, 2008 at 4:40 am

Good tip Peter, that should validate now. Nice one :)

Adeyemi Babatunde
Jun 12, 2008 at 7:28 am

This is too good to be true. Thanks for the being a source of inspiration. Though I’ve been putting it to use even before reading your write-up, mine has never been this beautiful. Thanks

Graham
Jun 12, 2008 at 9:31 am

Wow once again you’ve shared an incredible tutorial – thanks!
I’ll definitely be using some of these methods soon.

Julie
Jun 13, 2008 at 6:04 am

Very nice. Thank you

Web 2.0 Designs
Jun 13, 2008 at 11:52 am

Awesome designs on this site…:)

Paul Palmer
Jun 13, 2008 at 12:04 pm

Wow, this is a great resource. I’ve tinkered with this effect in the past, but never to this extent.

guest
Jun 13, 2008 at 9:18 pm

the thumbnails itself are interesting. what kind of art/technique are they called anyway? thanks

Cathy | Mommy Motivation
Jun 15, 2008 at 9:58 pm

Thisi s so very awesome! Thank you for sharing this with us.

Guisella
Jun 16, 2008 at 12:59 pm

This is awesome

Jenn
Jun 16, 2008 at 4:15 pm

I was just surfing and ran across your site! Great info tutorials! Thanks!

John Brown / Free Online Games
Jun 16, 2008 at 7:12 pm

Thanks!! This is awesome…

Ploocky Youth
Jun 17, 2008 at 1:00 pm

OH MY GOD!
This is perfect! I cant believe it :Q
You are awesome Congratulations!

Code It Red
Jun 17, 2008 at 5:19 pm

Love the effects. I am a huge fan of this kind of stuff and CSS is one of the main languages that I focus on today. I will of course be using these methods in my coming projects.

Ryan
Jun 18, 2008 at 7:37 am

Awesome, I will use it on my graphics blog, infact the effects and stuff here is inspiring me to again as much as I can. Thanks

Matthew Johnson
Jun 18, 2008 at 12:52 pm

Well done as always, this is really great inspirational material and very useful as well. Keep up the great work!

Zamotin Dmitry
Jun 19, 2008 at 4:09 am

This Goooooood! Super! Thanks! This cool tutorials!

Dmitry (Russia)
Jun 19, 2008 at 11:16 am

This cool tutorials))))!!!!

Lisa Noble
Jun 19, 2008 at 11:36 am

Wow. Thank you so much. I love your site. It is sooooo vibrant and I learn something everytime time I come back.

Quality Designs
Jun 20, 2008 at 10:52 am

Great work!…world class quality designs.

JM
Jun 21, 2008 at 12:41 am

Very nice tutorial! Just one question though: I would like to use slightly larger picture frames- where would one be able to find some? Did you create these ones yourself?

Thanks!

gilda
Jun 23, 2008 at 7:37 pm

hello! i just surfed onto this website and i’m so in awe. i want to learn so many things to use on my blog (which i was so proud of but now i look at this and i feel sh*tty). i know zilch about css but i’m so inspired by everything here!! it looks great and hopefully one day i could use these. i mean of course if i had the money i would love to hire you guys, but this poor college student will just have to diy!!

William Li
Jun 24, 2008 at 8:33 am

Great work,

I’ve done something similar on my site where the date tag sits over the main image. Using absolutes has been a godsend in CSS and allow much more freedom for the web designer.

Peter
Jun 24, 2008 at 4:59 pm

FF3 doesn’t work. How to fix it.

Skyte Media
Jun 25, 2008 at 11:29 am

I’ve been looking everywhere for a place that describes how to add border gradients using CSS. Thanks!

Visit us at http://www.skytemedia.com

kimboa
Jun 25, 2008 at 7:56 pm

good!

2clicks
Jun 26, 2008 at 3:35 pm

EXXXXXXXXXXXCELLENT, MAN! THANKS!

kaffy
Jun 27, 2008 at 10:55 am

i love it!!
that’s very cool!!!!
thank you so much for having such great tutorial!!!

Pure CSS Layouts
Jun 28, 2008 at 9:25 am

Nice tutorials for CSS Layouts on site for designers!

panoRmo
Jun 30, 2008 at 2:43 am

Really nice trick, very useful!
Thanks!

bluevn
Jun 30, 2008 at 12:33 pm

Wow, ur website is great ! Many things r interesting ! ^^ Thanks

Danish
Jul 1, 2008 at 12:27 pm

Amazing work…….Outstanding designs and well written tutorials…Thank you so much sharing it and hope you keep coming up with gr8 stuff like this

Peter E.
Jul 1, 2008 at 2:34 pm

Wow…very interesting!!!!! Thanks…I’m from Cuba, my english is not so good…but a like much this page!!!! thanks again

Al
Jul 2, 2008 at 12:49 am

Fantastic. Nice post and excelent blog! Congratulations.

satty
Jul 2, 2008 at 3:52 am

y dont u give all information about how made effects in photoshop?

Deepak Shakya
Jul 2, 2008 at 8:34 am

Wonderful stuff….thanks…keep up the good work

Else
Jul 2, 2008 at 10:00 am

Great.
I really like this page.

zheung
Jul 4, 2008 at 5:19 am

perfect! I got the main background image! thanks

Quality Designs
Jul 7, 2008 at 10:00 am

Nice article!
But we need to find some simple solution for all browser/OS.

Michele Valongo
Jul 7, 2008 at 2:04 pm

Puts! Muito Irado! (expressions in Portuguese that shows surprise. Ex: Wow!)
Your blog is very interesting and useful for us webdesigners.
Congratulations!

oyuncu
Jul 7, 2008 at 3:38 pm

thnks from turkey

Guillaume
Jul 8, 2008 at 9:46 am

Very nice gallery. I used to make my frame borders with photoshop tuning every picture but it’s much more easier this way.

Thank you for all these neat tips, keep posting :)

Very nice blog!

Mukesh gupta
Jul 10, 2008 at 5:21 am

Its is good to the fond of using css for make your site attractive

Raj
Jul 10, 2008 at 7:47 am

useful tutorial m8. Thanx!

Manu
Jul 11, 2008 at 8:41 am

Very nice gallery…really thanks.
And very nice blog.

free online articles
Jul 12, 2008 at 8:18 pm

I’ve been meaning to learn more about CSS, and your post has helped me a lot.
Cheers,
Sam

shoutree
Jul 13, 2008 at 1:16 am

Thanks, It’s a coooool artcle.

Yëco
Jul 13, 2008 at 11:28 pm

One of the best css tutorials I see since a lot of time ago.

Thanx

tunkmay
Jul 13, 2008 at 11:57 pm

Your site very beautiful. I like it very much. Thank alot for your tips.

Search Scripts
Jul 14, 2008 at 2:11 am

This is perfect example of a fully CSS based photo gallery. I wish all web designers could have the creativity like you.

Flash Photo Gallery
Jul 14, 2008 at 7:17 am

This is really nice. Thanks buddy!

Stephanie
Jul 19, 2008 at 1:00 am

Thanks so much for this, I’m currently redesigning my portfolio–creating some of these will surely save me lots of time, and really opens the window for creativity!

IT services in india
Jul 19, 2008 at 1:33 am

I lov this gallery… Thanks!

amit sinha
Jul 20, 2008 at 6:06 am

really a great work. An awesome design. I am going to explore some of them to my students. Thanks buddy.

best web design
Jul 20, 2008 at 10:02 am

Again nice post!
Consistently giving great tips for web developers…Thanks!

Sandra
Jul 21, 2008 at 1:20 pm

that is great! thank you so much! =)
i’ll try it out definitely!

trCreative Web Design
Jul 23, 2008 at 9:08 am

Fantastic set of techniques – bookmarked for future use – thanks!

Jan Hafner
Jul 23, 2008 at 7:14 pm

you can simply add a “nbsp;” between the span tags to create valid xhtml :-)

Christopher Anderton
Jul 24, 2008 at 4:32 pm

Very very nice. Been looking for something like this. Now i wonder how to implement this to WordPress (Thumbs on pics uploaded).

ter10n
Jul 28, 2008 at 7:37 am

this real c00l :P

Lorenzo Ahmadi
Jul 28, 2008 at 2:24 pm

I dont know what I would do without you. Keep up the good work and thank you for making my life easier :)

ipei
Jul 28, 2008 at 11:16 pm

thank you so much for your tutorial! love your website too, sure i bookmark this site.

hd
Jul 29, 2008 at 10:56 pm

Thank you so much *_*

lokendra
Jul 30, 2008 at 1:01 am

i like it cool u can see more

Thiago
Jul 30, 2008 at 9:33 am

Eu tenho uma pergunta, para que serve a tag “em”?

Ray
Aug 1, 2008 at 1:34 pm

Very interactive and usefull tutorial, thanks for sharring.

Wendy
Aug 5, 2008 at 11:21 am

Can this be adapted for a set of images that have different sizes, and the size is not known until it is grabbed off the server?

Great tutorial btw.

Renzo
Aug 6, 2008 at 10:49 am

Excelent. Its very usefull and nice.

RaphaelDDL
Aug 6, 2008 at 4:30 pm

Hello :D
I mixed 2 kinds of gallery (the one with glassy effect and the one with the gray/orange description).

The visual is awesome but, even i tried using clear:both in the div below the gallery, the li’s still are floating and getting in the way of the lower div O.o

What should i do?

Thank you.

Boda
Aug 8, 2008 at 9:52 am

Sorprendente.
Me encanta este sitio web siempre esta lleno de nuevos recursos para poder innovar con las tecnicas para diseño.

Gracias.

Sam
Aug 8, 2008 at 5:28 pm

I know that IE is of the devil, but you can’t use transparent png files because the transparent part of them turns white which would block out the picture. Just a concern. I know it’ll work on Fire Fox and Safari, the two best browsers ever.

Raphael DDL
Aug 9, 2008 at 7:07 am

Sam, in the tuto he uses pngfix.htc to fix that error in IE6 so, works with it too

Rich
Aug 13, 2008 at 11:08 am

Thank you very much… Perhaps you can take a look at our FTP solution and provide us with some feedback: http://www.singlewrench.com

gaston.alegre
Aug 14, 2008 at 3:47 pm

This article is just great, I’ve used it on my home page. Thank you so much.

Gray Ayer
Aug 18, 2008 at 6:10 pm

Way to go Nick. Always pushing the boundaries of CSS.

Jeremy
Aug 18, 2008 at 6:47 pm

Thank you for sharing this wonderful technique! I am using the mini paper clip theme to display a photo gallery on my company’s intranet, and it is working very well.

Term Papers Writer
Aug 20, 2008 at 3:27 am

I really like Simple Gallery and Mini Icons. Shows that a lot of work has been put into this. Very different from traditional work. Can you we have more of these? :D

feha
Aug 20, 2008 at 6:43 am

I just can say WOW, was thinking about this, but now is here :-)
Thank You very much.

Justin
Aug 21, 2008 at 5:23 am

nice ….. good job dude …. keep on the good work :)

Ritwik
Aug 22, 2008 at 5:39 am

I need a solution that how could I make the backround such as your? Your design is excellent

Patrícia Anzanello
Aug 25, 2008 at 9:36 am

Wonderful! Do you know if this can be used in Blogger? I was thinking in using it to decorate each post photo. Didn’t work yet. I’ll keep trying!
Thank you!

website design
Aug 25, 2008 at 10:29 am

great tutorial. I learned something today. Thank you.

Fred
Aug 25, 2008 at 11:10 am

Very nice.

What about then you have landscape and portrait images mixed together?

CSS Model
Aug 26, 2008 at 12:58 am

Thanks for such a great technique! It is really a wonderful idea.

darlet
Aug 27, 2008 at 10:42 pm

does this work on multiply? its cool..

shalini
Aug 28, 2008 at 10:41 am

i’ve just started to learn CSS. can anyone tell me how to apply the round-corner.png to an image of size 50×50.do i have to make another png with the desired size?? apologize for the trivial question.

awesome trick btw!

shalini
Aug 28, 2008 at 10:48 am

Oh and i was talking about the 8th style in the 15 different styles…

Brandon
Aug 28, 2008 at 11:33 pm

hmmm, this is actually pretty hot. Lately I’m a big fan of quick-tricks for galleries and stuff (I’ve been messing with some of the cool flash driven stuff out there), but I’ve always had a soft spot for good clean css based galleries. nice post – thanks for sharing it.

Zeytin
Aug 30, 2008 at 11:30 am

Great tutorial.Thank you.

QQ
Aug 31, 2008 at 5:34 am

it cool……

fedmich
Sep 2, 2008 at 11:41 am

Very nice :)
Thank you for sharing this

Nimol
Sep 2, 2008 at 9:35 pm

Thank for guiding us!
(“,)

polaris
Sep 3, 2008 at 2:15 am

Very nice.

David
Sep 4, 2008 at 2:36 am

Thanks! Much less boring than the usual galleries.

Knoxville Website Design
Sep 4, 2008 at 8:10 pm

Wow, even looks great in IE6. Nice handy resource not only for great looking galleries but also for a png fix that works how they say it should.

Willem de wijs
Sep 5, 2008 at 3:19 am

Love it. Thanks
i’m checking it out.
Willem
the Netherlands

Phyu Mon
Sep 5, 2008 at 10:50 am

Cool! I’m just starting to learn about web design and CSS. Can u recommend me about websites that I should visit?

onecss.com
Sep 9, 2008 at 1:25 am

amazing stuff..

Nev
Sep 12, 2008 at 8:55 am

These are simply great!!!! Thanks a lot.

Dave Ellis
Sep 17, 2008 at 2:16 pm

Great tip – really useful!

Tenika
Sep 17, 2008 at 4:28 pm

Thank you very much of this tutorial! I will be using this.

snipe
Sep 21, 2008 at 6:15 pm

These are amazing – thank you so much!

chethan
Sep 23, 2008 at 2:31 pm

Oh wow nice one.. please could you see my website if i could change it to make a gallery using those codes above?

arga
Sep 23, 2008 at 2:34 pm

Okey, I’II try it. I am beginer and sorry I can’t good speak english. I am come from Indonesia

Andrew
Sep 23, 2008 at 4:24 pm

lovely stuff..Thanks a lot!!!

TomGerry
Sep 24, 2008 at 3:51 am

Love it. Thanks
i’m checking it out.
Willem
the Netherlands

blogger
Sep 24, 2008 at 3:52 am

Cool! I’m just starting to learn about web design and CSS. Can u recommend me about websites that I should visit?

Rahim Haji
Sep 25, 2008 at 12:16 pm

My name is Rahim and I own a design and development consultancy in Enfield, London. We would like our site to be added to your gallery because its clean, standards compliant, great use of css and jquery as well as degrading gracefully.

Therefore, we would appreciate it if we were featured on your site so visitors can make comments and let us know their views on the design.

Regards,

Rahim

Gene D
Sep 25, 2008 at 2:56 pm

Very nice! Simple markup with a great effect!

Shirley
Sep 28, 2008 at 7:15 pm

Excelent Tutorial! i’d like to use it in some of my pages =)

It’s really nice ^^

Thanks!!

Kari
Oct 2, 2008 at 6:59 pm

Can this be used to layer a png over a .swf file?

Berat
Oct 3, 2008 at 4:21 am

very nice… thank you :)

Brendon
Oct 6, 2008 at 7:16 pm

Great trick and very interesting article. Thanks for sharing it with all of us…

Friend
Oct 7, 2008 at 5:20 pm

Awesome illustration skills!!

MSOnWired
Oct 9, 2008 at 7:54 am

These are great illustrations. I love the use of color.

web-d
Oct 10, 2008 at 6:49 am

I’ve been looking for a tutorial like this, and couldnt hope for a better one! every thing I need!
thank you very much!

Alanya
Oct 11, 2008 at 3:15 pm

Another great post from this page, thank you!

Andy
Oct 17, 2008 at 9:35 pm

Wow, this is awesome. Just to let you know I’ve used one of the examples for my gallery on my website. Really amazing work and it has inspired me to experiment with CSS to test its power.

Gggreat
Oct 18, 2008 at 5:23 am

Great tutorial! Thanks alot !

Sunil Shrestha
Oct 18, 2008 at 10:44 am

Tutorial is great!

alma
Oct 19, 2008 at 3:33 pm

como lo habro no puedo
al descargar no se puede ejecutar

Exdizajn
Oct 23, 2008 at 6:50 am

This gallery rockz!

Media Influence
Oct 23, 2008 at 5:37 pm

wow this is great. thanks for sharing

Lawrence @ Furious Photographres
Oct 23, 2008 at 7:24 pm

Calling this awesome is an understatement!

Bartek
Oct 27, 2008 at 2:44 pm

great tutorail, thx!
i’ll use it on my page

mark Ole Barner
Nov 4, 2008 at 7:32 pm

a video tutorial on vimeo or something would be totally cool!

Eray USTA
Nov 11, 2008 at 4:03 pm

Nice tutorial thanks

costudio
Nov 12, 2008 at 1:53 pm

this is so cool! thanks a lot.

Steph
Nov 14, 2008 at 1:14 pm

So I may be the billionth person commenting — THIS IS AMAZING! Thanks for sharing, this will come in handy with my new look :)

Diego
Nov 14, 2008 at 7:10 pm

Im glad Ie finally handles pngs properly, it used to be a real hinderance, good tutorial matey !

Diego
http://www.corporatewebsolutions.net

MraxL
Nov 18, 2008 at 9:19 pm

Amazing!! nice tutorial..

webtechnepal
Nov 19, 2008 at 6:11 am

Thank you so much. Now I can use on my web works. Thanks.

new
Nov 23, 2008 at 7:32 am

actualy i download the files but i dont know where to start

i have a site using impressCMS

Jen Tank
Nov 23, 2008 at 2:18 pm

hello, I created rollovers for my image gallery at jentank.com using this method, but the span image is showing up under the thumbnail image in ie7. Does anyone know why this would happen? IE seems to be interpreting the ‘top’ class differently than firefox and safari.

Digital Photography
Dec 2, 2008 at 12:16 am

Your way of explaining the use of css allow me to really grasp the concepts. Thanks

Carlos Hermoso
Dec 2, 2008 at 7:01 am

Good post. Thanks for this tutorial

Arif
Dec 3, 2008 at 2:36 am

Thanks a lot for the nice article.
As I’m a novice I wanna know how can I manage Images and Image Frames that have Dynamic sizes ?!

Thanks anyway

Joomlapanel
Dec 3, 2008 at 11:41 am

Never seen like this before.. very excellence CSS tips

Jorge
Dec 4, 2008 at 1:00 pm

First i will thank you for your blog! It’s very helpful!
I’ve followed this tutorial but my pictures have an ugly blue frame. I’ve tried with
.photo a:link {text-decoration:none}
but it doesn’t work…
How can I remove this frame?
Thanks again

Herramientas blog
Dec 4, 2008 at 7:19 pm

cool job, very cool job people

bebo music skins
Dec 6, 2008 at 11:51 am

great stuff, ive been looking how to do this for ages, thanks

mike
Dec 13, 2008 at 2:19 pm

Can you provide the full php file for the templates. I am not getting how to make them at all.

Thanks!

Mellick
Dec 14, 2008 at 1:28 pm

This is Brilliant, I have been looking for something like this for ages for my members site. I have one problem with it for use on my site, maybe someone can suggest a fix. I want to use it to display user thumbnails which are all the same width of 130px which is no problem but they are not all the same height. I would like to set the image frame to display the top 100px of the image but clip anything below that as this peaks out from behind the frame. I don’t want to set image height as this will distort the images. I have tried setting the css for li to a height of 100 with overflow hidden but this cuts off the bottom of the frame. A few other things I have tried have been just as unsuccessful.

Anyone got any suggestions?

BTW I stumbled upon this site by accident and just love it

st.killian
Dec 15, 2008 at 2:14 am

so cool !!

publicitate online
Dec 18, 2008 at 2:19 pm

Very nice work, good job!

Markus
Dec 18, 2008 at 4:32 pm

Can somebody post a good way to get the black brush-border for all sizes?

I had a try, but im not sure, if this way is really ok. I took the background-image from the span and placed it as a real img in the span. I adapt the brush-border image size and the padding to the image size automatically by PHP so that it fits.

albertto
Dec 19, 2008 at 6:27 am

Awesome !!! Thanks for share.
if(woman){
write “I love you”
}else{
write “best regards”
}
:)

Ahmad Esmaeilzadeh
Dec 31, 2008 at 6:13 am

I used it with my design,
here : http://www.shomalgan.com/blog/2008/12/11/portfolio-page-and-nextgen-gallery/

chuhe
Jan 1, 2009 at 9:22 pm

good good, very nice, thanks….

Arafat Rahman
Jan 17, 2009 at 10:23 am

Wow! Nice

gradina
Jan 18, 2009 at 12:27 pm

This is really nice. Thanks buddy!

aşk
Jan 19, 2009 at 6:02 pm

nice.. good jop

islo
Jan 24, 2009 at 5:13 am

very very nice

Trevor Saint
Jan 24, 2009 at 8:06 am

Remarkable, yet simple. Thanks for all your site tutorials, tips and tricks. Bookmarked.

Chris Raymond
Jan 27, 2009 at 12:43 pm

Very nice–but what happens if your images are not all the same height or aspect ratio? I’m thinking, for instance, the example with the photo corners. I’m designing something where the featured photo will change on a regular basis and may not have the same aspect ratio all the time.

gardenia
Feb 9, 2009 at 6:01 pm

this is really nice

Russ
Feb 14, 2009 at 11:43 am

I am trying to integrate this into my WordPress site with the NextGen Gallery plugin. For the most part, it works. Some instructions were updated here to get your CSS code to work with it here: http://alexrabe.boelinger.com/2008/11/25/new-in-version-100-templates/ however I notice that in IE it displays properly, but in Firefox, it shows BULLETS for the LI. How can this be fixed?

Pieter
Feb 14, 2009 at 4:18 pm

@Russ:
Use
ul{
list-style-type: none;
}
in your CSS file :)
This should work.

Frankie
Feb 15, 2009 at 10:26 am

Thanks. Evething is OK, but 2b can’t working the in IE6.

Frankie
Feb 15, 2009 at 10:26 am

Thanks. Everything is OK, but 2b can’t working the in IE6.

elham
Feb 20, 2009 at 12:33 pm

thanks.very very nice

Peter
Feb 20, 2009 at 1:55 pm

This is awesome! Thank You!

@BrentwGraham
Feb 23, 2009 at 1:44 am

Why isn’t this just written as a WordPress plugin that re-writes the correct .php & .html files?

This would be a huge success as a WP plugin.

sam
Feb 24, 2009 at 8:56 am

i like it

dele
Mar 5, 2009 at 2:06 pm

This is absolutely crafty!! I was about going the PHP+GD library way. When i found a post that led me here. This sure cuts down server overhead big time!!

Thanks for this resourceful past

sivas
Mar 18, 2009 at 5:41 am

very good, thanks

abed el salam
Apr 3, 2009 at 10:32 pm

thanks ,

fashion design
Apr 7, 2009 at 10:11 pm

hey Thanks for this :) lovely gallery

Ahmet
Apr 9, 2009 at 2:16 am

This work very good! Thank you very much..

Creamy CSS Gallery
Apr 10, 2009 at 4:16 am

Great and really helpful post! Thanks a lot for sharing nice stuffs! You do a great work for your visitors! Thank you! ;)

Besides, I’m going to use this gallery in my new project,.. :)

ralph
Apr 11, 2009 at 6:10 am

i love it. really saves great amount of time creating stunning webpages.

CSS Gallery
Apr 11, 2009 at 9:18 pm

As usual another great article! We have indexed webdesignerwall.com at CSS Gallery.com Keep up the great articles!
CSSGallery.com

gallery
Apr 15, 2009 at 11:27 am

i want to click then run an popup (the same). help me!

Julian
Apr 16, 2009 at 10:27 pm

muchas gracias, thanks. this is so easy and useful.

Steffen
Apr 17, 2009 at 7:41 am

This is fantastic! Looks amazing.

Keith D
Apr 17, 2009 at 10:07 am

Can’t wait to try this on my own site.
Thanks..

Keith D

Jasper
Apr 22, 2009 at 5:01 am

i like it

Fahad
Apr 25, 2009 at 3:28 pm

Its a great contribution not only this post but the whole website

z.Yleo77
Apr 28, 2009 at 2:48 am

this tutorial was very very useful。。thanks。

shadolen White
Apr 30, 2009 at 3:30 pm

Thanks.. I’m a student with a lot learning to do.
this is sweet I came to your site.

onearmfrog
May 4, 2009 at 11:35 am

simply amazing!

Webmaster Mexico
May 4, 2009 at 4:54 pm

Excellent post!! Thanks for the examples.

titi
May 6, 2009 at 12:45 pm

I have some problems with the image which is placed to far from the left and top of my post, I don’t really know where I need to fix in the css…

http://www.titi.me/disney/ (first post)

titi
May 6, 2009 at 2:02 pm

fixed :) I use div instead of ul…
please delete my blog url thanks for this usefull idea !

Many
May 13, 2009 at 8:52 am

very nice!! very very useful!!

Priyanka
May 13, 2009 at 11:17 am

I find the whole website really useful and keep coming back here whenever i face challenges from our clients.

Jemima Taylor
May 20, 2009 at 12:38 am

addesignlink is a beautiful, functional design gallery based directory only for best beautiful designed web 2.0 styled websites. The web organized by topic into categories. … Help build the largest human- edited directory on the web.

Submit your website for free to the internet’s fastest growing directory! Category based and cross-referenced.

Directory is a beautiful, free, and can be used as a starting point for many different types of websites: Blogs, Joomla, Web2.0, Flash and so much more.

deeve
May 21, 2009 at 8:59 am

Hi,
I like your concept but appears not to align the overlay .png correctly in Google Chrome. It does so correctly in IE7 & Firefox. I use the rounded corners example & modified to work with Next Gen Gallery thumbs.
Any ideas?

William X.
May 27, 2009 at 7:54 am

Man, your tutorials are simply fantastic!! The effects and ideas are brilliant. Love to see more amazing css tricks. thanks a lot

m111m
May 28, 2009 at 5:49 pm

Thank you very much

Watin
Jun 1, 2009 at 1:05 am

This is excellent tutorial, thanks

Vince
Jun 4, 2009 at 3:33 am

Very interesting tutorial. Thanks !

cartoon photo
Jun 6, 2009 at 12:33 am

this is wonderful!
i have to try this ‘framing trick’ myself.
thanks for the tutorial. you’re great!

Eugene
Jun 7, 2009 at 6:44 pm

smart article, thank you from Russia!

elite gamers
Jun 13, 2009 at 8:54 pm

Thank you for the article, but how do I install the templates? I’am a little lost and a lot frustrated that I can not figure this out.

laurent
Jun 19, 2009 at 2:39 am

thanks a lot :)

Thomas Jehle
Jun 24, 2009 at 11:01 am

This is what i’m looking for, thanks a lot
greats from austria

venkat
Jun 25, 2009 at 5:43 am

Fantastic tutorial.thank you

Francesco
Jun 26, 2009 at 5:37 am

Impressive the clarity of the explanation! Thanks very much for the time spent for the tutorials.

Michael
Jun 27, 2009 at 5:41 am

Excellent work!!

Alex
Jul 10, 2009 at 12:44 pm

Wonderful! Thanks a lot
greats from Russia

Brad
Jul 10, 2009 at 2:04 pm

This is the best design tutorial I’ve ever read! Love your site’s style! Very Cool! Thanks for the excellent tutorial.

Paul
Jul 12, 2009 at 4:03 am

This is a fantastic tutorial – very creative. Thanks

I wonder if this will hold together with a mix of portrait and landscape orientations?

Michael Alvarez
Jul 14, 2009 at 6:24 am

Great Tutorial. But some do they work on all browsers?

Chris
Jul 17, 2009 at 5:56 am

Great post about Css design tutorial, and it give me an idea of how to decorate images and photo gallaries.and i also found some benefits about CSS tricks.Thanks for sharing this useful post.

Calgary Graphic Design
Jul 20, 2009 at 12:08 am

I really have to try these out. Brilliant post – thanks!!!

Thess
Jul 25, 2009 at 10:57 am

Hi!
Seems like the decorative-gallery-demo.zip file is corrupt, cant open it?!

koming
Jul 28, 2009 at 11:20 pm

Good tutorial, thanks…

Alexiel
Aug 2, 2009 at 10:01 pm

Nice Tuts!…. but your file is damaged, please reupload, tnx

Gee
Aug 6, 2009 at 6:24 am

hey great script,

I just gave this technique a go, it worked a charm the first time but the second time the borders seem to go behind the image and not covering the image like their supposed to. I was wondering if you could possibly point me in the right direction for fixing this?

cennet
Aug 8, 2009 at 5:40 am

Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.

cennetevi
Aug 8, 2009 at 5:43 am

these are awesome!
thanks for putting in the effort to get this list together

keaglez
Aug 9, 2009 at 11:27 am

Thanks, that was awesome…

rybber
Aug 17, 2009 at 1:20 pm

Looks nice, but your example assumes that all thumbnails are horizontal with the same dimensions. When you use different thumbs it doesn’t looks as good. Can you please do a version for different sized thumbs?

Aaron
Aug 30, 2009 at 7:07 am

Such great work, your skills are to be admired.
Thank you very much for sharing, it really helped me understand this technique a lot more.
Regards,
Aaron

Aoobi
Sep 4, 2009 at 7:55 pm

Nice article. Seems like the decorative-gallery-demo.zip file is corrupt, cant open it?!

bagsin
Sep 10, 2009 at 7:53 pm

Seems like the decorative-gallery-demo.zip file is corrupt, cant open it?!

Chris
Sep 13, 2009 at 9:49 pm

Nice job. :]

Mudassir Siddiqui
Sep 17, 2009 at 9:40 am

wow…so nice…:) its really amazing ..:) :S but file is corrupt..now what??

Cyrus
Sep 21, 2009 at 9:42 am

Great , CSS Decorative Gallery
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Custom Gift
Sep 25, 2009 at 8:50 am

These are great! I’m going to try and incorporate with my CSS driven promotional product and custom business gift web site. Thanks!

Daniel
Oct 3, 2009 at 10:55 am

Would it be possible to add one of theese frames to some non image div?

Kat Thompson
Oct 6, 2009 at 7:08 am

Fantastic, thanks so much – these things I always imagine to be quite complex but you’ve shown how easily website design can be made to look that little bit more individual. Thanks.

Erwin Schro
Oct 7, 2009 at 1:12 am

Thanks for the great tutor for noob like me…will implement it for my joomla-based gallery site.

masterx
Oct 7, 2009 at 10:24 am

my nutsack balls have swollen reading this tremendous mind blasting tutorial. keep it up.

BASINGLASS
Oct 7, 2009 at 11:52 am

This place is a gold mine, the great ideas never end :)
Thanks for the tools and files provided, very awesome background tricks…and thanks for the IE hacks!
– BP
http://www.basinpipes.com

Nathan
Oct 10, 2009 at 4:59 pm

Worked perfectly for me! The jQuery method is absolutely great.

iGrog
Oct 13, 2009 at 1:02 pm

Great graphics, great code, but am I the only ones that has different size images? I’m sure I,we, can tweek it like you did on you page ‘backtotop’ footer.

Luya Tshimbalanga
Oct 20, 2009 at 8:32 pm

Very impressive tutorial. I am on my way to revamp my own website and was looking to make a good gallery page. I graduated as Graphic Designer and wished to know early about this website.

A great thank you for providing inspiration. One day I will share skill about the css and soon experimenting with SVG.

Andres
Oct 24, 2009 at 11:49 am

Very good blog! nice articles!

ruby
Oct 29, 2009 at 1:45 pm

ninguno

ruby
Oct 29, 2009 at 1:51 pm

$(document).ready(function(){

//prepend span tag
$(“.photo a”).prepend(“”);

});

Mike
Oct 31, 2009 at 4:56 am

Thanks for the great tutor for noob like me…

brady
Nov 13, 2009 at 2:24 am

Dude you are wesome, I love your site and your tutorials are outstanding…I just was curious in ordert to make the css decorative gallery work in wordpress with the NextGen Gallery do I need to somehow alter any php documents to get the extra span tag added in wherever a thumb is??? thanks in advanve for any help

Sebastiaan
Nov 17, 2009 at 8:49 am

OK, 408 comments, don’t have time to read them all, I just wanted to say thanx ;-) So many articles, so many solutions. This was by far the simplest – and easy to implement in a ColdFusion webstore environment where the HTML is dynamically created!

Again, thanx for putting this out there ;-)

Rojish
Dec 2, 2009 at 10:58 pm

Nice information.
Thanks…..

Oxifeanevefak
Dec 10, 2009 at 7:36 am

SOPALMIVIOUMS
yd5f

Nikita
Dec 15, 2009 at 9:06 am

Thank you for your time and will helping others!

ThiNg
Dec 24, 2009 at 10:41 am

I used this technique to create some fancy image bases checkboxes in a form I am desigining. You can read the full details here on my blog. Thanks for posting this great technique!

Biswa
Dec 30, 2009 at 5:16 am

This is one of the best CSS tutorial ever I have seen on NET.I really thankfull to you for this great tutorial.Beacuse you have publish your technique.Really really Great CSS Tips and Tutorial.

vincentdresses
Jan 5, 2010 at 11:40 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

brenda
Jan 6, 2010 at 12:53 am

BrEnDa

nikhil
Feb 1, 2010 at 9:39 am

really a gr8 script..now its easy to frame a image. thanx for sharing it !!

Derrick
Feb 2, 2010 at 5:45 pm

Awesome trick!

Is it possible to overlay THREE images? I have three PNG’s with transparency, I’d like to have them overlaid so I can create some neat effects with each individual PNG.

Michael
Feb 12, 2010 at 6:47 am

Hi, there!

when you came out with this, quite a time ago, i was really impressed but i realized (as well as also other people commenting here) that you can not use the decorative frames with any other picture sizes than the frame size. so you had to create the frames for every picture size you wanted to use them with, but since i have no idea of PS, i had to think in something else…

now i come back to give you a cross-browser jquery plugin based mainly on the border-image and border-width CSS3 properties where available and the jQuery Border Image Plugin by lrbabe where not.

check it out

and enjoy carnival!

Sumon
Feb 13, 2010 at 2:46 pm

One of the best website of learning CSS design. Thanks for all the tips.

pascal
Feb 18, 2010 at 9:30 am

belle realisation en CSS c’est simple et toujours efficace d’embellir des images d’un site .. car trop de jquerry kill mootools

aksoft
Feb 23, 2010 at 8:23 pm

thanks~

Medya
Mar 19, 2010 at 8:30 am

Oh My god …
thank you very much for sharing this lesson with us ..
it’s Really Fantastic job ..

Jack
Mar 25, 2010 at 7:38 pm

thanks for sharing these designs. just what i was looking for

nXqd
Mar 25, 2010 at 9:03 pm

Well content . Thanks so much for great explaining :)

ZM
Mar 28, 2010 at 11:28 am

thank u, very helpful.
bye
ZM

Greya
Mar 30, 2010 at 12:36 pm

Hi!
Great post again!
I’m trying to implement this method in the default wordpress [gallery] and I don’t understand where should I prepend the in this case?
Could you, please, give me any tips?
Thanks!

Artur
Apr 5, 2010 at 3:22 am

thank you for a great lesson. now everything is clear and I know how to use that tag. thanks !!! This is the best site for web design learners.

Ranjit
Apr 20, 2010 at 7:39 am

Simply Awesome.. thanks..

spor
Apr 21, 2010 at 6:44 am

thanks for sharing, ı will test it..

esther
Apr 26, 2010 at 1:10 pm

ZzzzzzzzzzzzzZZZZZZZZZZZzzzzzzzzzzzzZ

Web Design
Apr 28, 2010 at 8:45 pm

Amazing thank you for sharing

Rayhan Chowdhury
May 5, 2010 at 1:02 pm

Its a amazing tutorial, thanx for sharing…

crusher
May 8, 2010 at 3:44 am

well good . learning

Gaby
May 19, 2010 at 11:53 am

Thank you!! Very helpful, great technique and great explanation. And looks beautiful!!

wallpapers desire
May 20, 2010 at 9:18 pm

i have implemented this in http://www.wallpapersdesire.com it’s great…..thanks

slovnyk
May 29, 2010 at 3:02 pm

cool design – i like it! really beautiful.
i’m trying to find out how to make complex design with css and images, but i can’t understand how to correctly position blocks and how to add background images in order, for example, to make a frame consisting of top left, top right, bottom right and bottom left corners, each of them should have background image and between them should be positioned some text…

Alex
Jun 1, 2010 at 6:34 am

great
thank you

DuMendes
Jun 11, 2010 at 6:08 pm

Hi, Tkx for the tutorial. I have a question: how did u manage to overwhelm the IE 6 png transparence problem?

Thank you!!!

grinding mill
Jul 3, 2010 at 1:47 am

beautiful pictures

raymond mill
Jul 3, 2010 at 2:06 am

Thank you for your share, you information is useful for me.

Andy Hunt
Jul 3, 2010 at 4:45 pm

The span tags are unnecessary. Create an unordered list like so:

<ul>
<li> <a href=”#”></a> <img></img> </li>
</ul>

Assign the <li> “position:relative; height:whatever; width:whatever;” and assign the <a> “position:absolute; display:block; background-image:your overlay image; height:whatever; width:whatever;”

cone crusher
Jul 6, 2010 at 4:11 am

Thank you!! Very helpful, great technique and great explanation. And looks beautiful!!

cone crusher
Jul 6, 2010 at 4:14 am

Thank you for your share, you information is useful for me.

grinding mill
Jul 8, 2010 at 12:48 am

Very good! It’s very helpful.Thank you!

vertical roller mill
Jul 8, 2010 at 12:55 am

It’s very beaulity!

cone crusher
Jul 12, 2010 at 8:14 pm

great
thank you

Mash Banda
Jul 13, 2010 at 4:46 am

This is a visually simple and yet effective trick to know thanx a lot
#Beaming :-)

Web Dizajn Design21th
Jul 20, 2010 at 8:09 am

Great! THX…

PHL Parking
Jul 21, 2010 at 2:57 pm

Excellent CSS Gallery, I really like this!

angel
Jul 23, 2010 at 9:28 am

very interesting post, thanks for sharing..

Claudio
Jul 27, 2010 at 10:00 am

Hi guys, I need your advise, I have 30 galleries in nextgen gallery with 8 different TAGS and i want to use the mini icons gallery in wich the icons shows according to the tag I assign to gallery or photo. I was thinking in create different templates for the different galleries, but I don’t know how to make the icons appear. I ‘m using wp 3 and ngg 1.5.5.

Thanks for any help.
(Sorry for my english)

West Coast Designer
Aug 3, 2010 at 6:12 pm

wonderful techniques! Thank you very much for the tutorial!

Joy
Aug 11, 2010 at 2:09 am

Hello,

I represent http://www.dollarcade.com – an online game site. This site is made with css and without the help of

table.

Please review our website and consider it to feature it on your site.

Thanking you for your time.

With Regards

Joy

CAROLAY ORTEGA
Aug 12, 2010 at 7:07 pm

ESTAN DIVINS

crusher machine
Aug 14, 2010 at 9:02 pm

WO,It’s so Beautiful! But some picture I don’t konw the mean

EasyLifeTerm.com
Aug 19, 2010 at 2:08 pm

My web designer recommended that I take a look at your article and list. I am so glad that I did. Thanks for your research and list.

grinding mill
Aug 23, 2010 at 3:33 am

Is the css compatible with IE6 and firefox???

christian
Aug 30, 2010 at 3:29 pm

hey i used sample 6 (the one with the yellow car here), just modified the non-javascript version, so you can use it for any size for any picture. So what i basically did is, cutting 4 cut edges (ol=oben links=upper left; or=oben rechts=upper right; ul=unten links=down left; ur=unten rechts=down right) as single images and include each of them in a seperate span tag placing them absolute:

CSS:
.image_container {
margin: 10px;
position: relative;
float: left;

}
.image_container img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}

.image_container img:hover {
border: solid 1px #999;
}

.cut_corner_ol {
display: block;
position: absolute;
width:25px;
height:25px;
top: -5px;
left: -5px;
background: url(images/cut_corner_ol.png) no-repeat;
}

.cut_corner_or {
display: block;
position: absolute;
width:25px;
height:25px;
top: -5px;
right: -5px;
background: url(images/cut_corner_or.png) no-repeat;
}

.cut_corner_ul {
display: block;
position: absolute;
width:25px;
height:25px;
bottom: 15px;
left: -5px;
background: url(images/cut_corner_ul.png) no-repeat;
}

.cut_corner_ur {
display: block;
position: absolute;
width:25px;
height:25px;
bottom: 15px;
right: -5px;
background: url(images/cut_corner_ur.png) no-repeat;
}

BODYCODE:

–> without the * of course… works like a charm :)

christian
Aug 30, 2010 at 3:32 pm

BODYCODE:
*div class=”image_container”*
*a href=”#” rel=”lightbox” title=””*
*span class=”cut_corner_ol”* */span*
*span class=”cut_corner_or”**/span*
*span class=”cut_corner_ul”**/span*
*span class=”cut_corner_ur”**/span*
*img src=”images/3.jpg” width=”300″ height=”200″ alt=”” /*
*/a*
*/div*

–> without the * of course… works like a charm :)

Kenzo
Sep 2, 2010 at 9:36 pm

Great Examples!!

SD
Sep 12, 2010 at 2:09 am

Excellent write up!

This technique is exactly what I was looking for and more! Beautifully implemented!

SD

H Barrett
Sep 17, 2010 at 9:49 pm

Hi,

I have a question I was wondering if you could help me with. I am using nextGEN gallery and on the demonstration pages of this plugin it shows that examples 1 – 6 are the Idea & Design from Web Designer Wall. I am trying to remove links from my thumbnails and notice in example 5, http://nextgen-gallery.com/templates/example-5/, you have done just that. How did you do it? Did you manage to do it with CSS? I noticed that there is a template=sample5 in the code. Did you create a new template and how? I would really like to figure this out. I posted the question “How to remove thumbnail links” in the nextGEN forum as well as maybe there is something easy I don’t know about.

Thanks in advance.

فيس بوك
Sep 19, 2010 at 6:31 am

professional teaching you should pay we for this tutorial

Leo
Sep 28, 2010 at 11:19 am

Thank you so much for this tutorial!
I’ve used it here http://www.ninhacozinha.com
Leo

Oswaldo
Oct 10, 2010 at 10:14 pm

I loved the styles demonstrated here. I’m a beginner with CSS and I just would like to know if I can use any border style for mouseover effect. For example you would put the “brown city” frame as a mouseover effect in one of your examples.
Thanks!

startac
Nov 2, 2010 at 4:04 pm

ive been looking online for some css to modify the existing wordpress css for galleries. this post is great but i just don’t know how to get from A to B

Chantal
Nov 11, 2010 at 10:18 am

Merci beaucoup pour vos idées ! Super travail !
Thanks you

@+
Chantal C

Adriana
Dec 3, 2010 at 1:11 am

Thanks for sharing, I was just looking for something like this for a website I am designing…

vitt
Dec 6, 2010 at 6:19 am

It’s a vevy interesting idea use CSS for decoration pictures.
Thanks.

Nu-z
Dec 9, 2010 at 8:33 am

AMAZING! Thanks for the amazing article, everything I was looking for as a matter of fact!!
I had so much fun here!! keep up the good work!! :)

Rhoel
Dec 12, 2010 at 5:20 am

Fantasic ideas and technical details! Bookmarked!

ravi
Dec 14, 2010 at 1:53 am

. Demo

ravi
Dec 14, 2010 at 1:54 am

R4

ravi
Dec 14, 2010 at 1:54 am

RAVI

max henrry
Dec 14, 2010 at 10:32 pm

cool .. 100 punts tks <3

Ale
Dec 17, 2010 at 12:18 pm

Is it possible to use this customization with a WordPress gallery ? Which one of my theme .css i need to modify to have this new frames on my gallery?

Thank you :)

Melvins
Dec 20, 2010 at 1:53 am

Very awesome and pretty great design. I like all of above.

Los Angeles Web Design

jiimena snap crazy
Dec 22, 2010 at 10:09 pm

la verdad me gustaria aprender muchisimo a hacer este tipo d cosas pero lastimosamente la pagina esta en ingles y no e podido leerla muy bn =( me encantaria q ubiese una pagina como esta en español mi idioma! =)

Henry Peise
Dec 24, 2010 at 1:51 am

First out was the iPhone 3G and as you can see the end result is very washed out and a bit grainy but you can choose white iphone 4 instead.

mikwillson
Dec 24, 2010 at 4:42 am

Your article’s resource box should help to persuade your readers. No matter how amazing your article is if it’s not succeeding in driving traffic to your website cheap ugg boots

Juno Mindoes
Dec 25, 2010 at 1:18 am

No wonder, with white iphone 4 in your hand will make you be the focus of the crowd! You won’t miss it!

laura
Jan 7, 2011 at 1:07 am

sta buenisima esta pág

Isah
Jan 8, 2011 at 2:07 am

I need a well decorate html for my site

Uçak Bileti
Jan 12, 2011 at 5:26 am

vardi butun derslerin gunahi oldum

Simona
Jan 12, 2011 at 8:10 am

Another great source for those who wants to see menus, web site trends, galleries, free extension and job for freelancers etc, visit http://www.1artmedia.com, you have online demo and free download. Hope that will be useful for you…

Ben
Jan 14, 2011 at 2:29 am

I stumbled on this while googling for some lyrics, I’ll be sure to come back. thanks for sharing.

gr33nie
Jan 17, 2011 at 6:31 am

What talent you have!

I have seen websites where an image(s) has a frame around it and I always wondered how that was done and now I know coming across your website.

Anyways, I’d like to know if this can be done to a rotating banner/jquery/carousel. I don’t understand the difference or the jargon. I need to see examples in action and cut and paste instructions.

Any help, suggestions, ideas, links, books would be greatly appreciated.

Thank you!

(I am a total newbie to website building and design.)

gr33nie
Jan 17, 2011 at 6:35 am

Oops!

forgot to mention that I am talking about the “#5b. Art Gallery – Gold Frame”

TheMagic
Jan 25, 2011 at 10:59 am

Your frames are superb – they remind me a lot of the framed images from http://www.350.com

tütüne son
Jan 29, 2011 at 3:55 pm

I need a well decorate html for my site

altın çilek
Feb 2, 2011 at 5:40 am

web sites and nice works thanks

hcg damla
Feb 2, 2011 at 1:32 pm

I stumbled on this while googling for some lyrics, I’ll be sure to come back. thanks for sharing.

sherlly
Feb 5, 2011 at 4:40 am

ea

Bryan
Feb 7, 2011 at 12:32 am

CSS is a very important part of designing. I must say that you had given a great idea to decorate the image without changing source image.

Florida Web Design

Lawrence
Feb 7, 2011 at 9:44 am

Hi,
nice usage of CSS. I would like to ask you, for your golden frame.
it is possible to upload 2 photos into it rather than just one ?

Your answer to this is greatly appreciated.

Warmest Rdgs,
Chun Wey

Rob
Feb 8, 2011 at 4:09 pm

Hi, I’ve been playiing around with the HTML & CSS code, but can’t seem to get this to work.
Any advice on what I;ve done wrong would be appreciated !
By the way had to take out the ”
head>
title>
/head>
body>
div class=”photo”>
a href=”#”>
span>
img src=”photo09.jpg” />
/a>
/div>
/body>
/html>

}
body
}
.photo {
margin: 30px;
position: relative;
width: 180px
height: 130px;
}
.photo span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: -12px;
left: 90px;
background: url(antique_frame1.jpg) no-repeat;
}
Thanks

hurhaberci
Feb 26, 2011 at 11:03 am

it’s too important…

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:22 pm

Inspires the artist in me. Thanks!

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:23 pm

A lot of ways to get artistic online. Thanks for this powerful knowledge.

Rob
Apr 4, 2011 at 5:12 pm

Many thanks for the tutorial !
I have found one problem I can’t seem to resolve and any advice would be greatly appreciated.
I have notice I can only get the code to work/display correctly if the image files I use have block security within the properties. If i unblock the security restriction then the images do not display within the gallery ! I have looked at forums to find a solution for this but have to date been able to find one that works.

MyB
Apr 6, 2011 at 7:47 pm

Inspires the artist in me. Thanks!

dexx
Apr 17, 2011 at 2:06 pm

Another questionnaire, the participants’ problem identification and structuring, idea generation, problem elaboration and clarification, such as creativity, problem solving insertion sezkin idea which one’s preferred styles are evaluated. While participants preferred the style of non-disclosure and intellectual development of ADHD, with ADHD, participants chose to produce ideas.

Guillermo
Apr 28, 2011 at 5:32 pm

How would you apply this on NextGen wordpress gallery? I can see this demos but no explanation about the way to do it:
http://nextgen-gallery.com/templates/example-1/

Any tip will be welcome.

Brenne Meirowtiz
Apr 30, 2011 at 10:04 pm

Thank you for sharing all of your marvelous tricks! Do do beautiful work!

Tom Helme
May 11, 2011 at 6:20 am

Great tutorial – I’ve used it as basic image protection on my partners website, a transparent png overlay. Preferable to disabling right click.

Xi Wang chan
Jun 25, 2011 at 10:18 am

A lot of thanks ^^!!!… I’m moving my website to a new host, then I’m improving some features, and this tricks are very very beauty and useful n_n…

SEO
Jul 8, 2011 at 3:47 am

Is a program that can design a variety of styles, very interesting.

Rich
Jul 12, 2011 at 2:05 pm

I’m curious if you can apply these styles to NextGen Gallery ALBUMS. I’ve seen plenty of styles applied to galleries, but it’s tough to see any for styling the albums themselves. Thanks!

Aaron
Jul 20, 2011 at 11:56 am

@Rich –
It is possible. I know the NextGen Gallery site mentions but doesn’t have any description on how to do it. You have to download the static HTML examples from this site then follow the directions to create the template file for NextGen gallery in your site’s theme folder (http://nextgen-gallery.com/templates/). This is a PHP file. You will have to copy the elements over from the example you wish to use and do some code editing. I created gallery-template.php file in the directory mentioned above, I also put the image file and css in that folder too. Don’t forget to call the gallery and include the template you wish to use with the short code: [ nggallery id=1 template=sample1 ]

Neel
Aug 2, 2011 at 5:26 am

Hi I am still learning php,css. can you share the template code so we can get an idea…

David
Sep 13, 2011 at 11:32 am

Agreeing with Neel…. I would love to see a sample of how you coded it to call on your styling! Thanks!

Honlapkészítés
Jul 27, 2011 at 5:30 pm

This awesome! Very like it – thank you!

طراحی وب سایت
Jul 29, 2011 at 12:36 am

Is a program that can design a variety of styles, very interesting.

Mini Blinds For Windows
Aug 6, 2011 at 6:24 pm

Hey just wanted to give you a quick heads up. The text in your post seem to be running off the screen in Internet explorer. I’m not sure if this is a format issue or something to do with web browser compatibility but I figured I’d post to let you know. The layout look great though! Hope you get the issue resolved soon. Thanks

Darío Martínez Batlle
Aug 16, 2011 at 9:56 am

Quite nice! Thanks, I’ll try to use this on one of my sites. It makes any gallery to look fresh and fun.

complex41
Aug 23, 2011 at 1:44 pm

And then he handed you the thirty-five 45

xbox 360
Aug 25, 2011 at 11:21 pm

Fantastic, thanks so much

heis
Sep 26, 2011 at 2:34 pm

thanks, very goods jobs

jordan
Oct 14, 2011 at 6:35 pm

[…] CSS Decorative Gallery […]

aytas
Oct 29, 2011 at 12:13 pm

Fantastic web site!! Thank you so much!

Sasha
Nov 21, 2011 at 2:27 pm

You are the MAN! Thanks again for the great tutorial and tips. I have followed you about 4 years now and you’re really talent…

kubodo
Nov 27, 2011 at 12:49 pm

i ever try this tutorial it’s very great but i have problem when use a gradient, gradient didn’t work..could you help me

Best Small Dog Breeds
Dec 1, 2011 at 1:39 pm

#2. Photo With Text is so Good, Thank you.

masum
Dec 5, 2011 at 10:32 am

Good – I should certainly pronounce, impressed with your site. I had no trouble navigating through all tabs and related info ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Reasonably unusual. Is likely to appreciate it for those who add forums or anything, website theme . a tones way for your client to communicate. Nice task.

P. R
Dec 16, 2011 at 1:00 am

This tutorial is excellent.. Thank you

spring valley vitamins
Jan 20, 2012 at 4:53 am

definitely, a BIG BIG deals.thx, for article

Custom IDX Solutions
Jan 30, 2012 at 12:37 pm

Nice tutorials they are very good. Thanks so much for sharing.

mina
Feb 10, 2012 at 3:18 pm

thank you .

rowshan
Feb 15, 2012 at 9:46 am

better site

hossein
Mar 8, 2012 at 2:49 pm

thanx for your tutorial
very nice…!

Matthew
Mar 17, 2012 at 8:06 pm

Can somebody please explain specifically how to apply this to NextGen gallery thumbnails? I would like to use a rounded thumbnail but i’m new to webdesign and i’m afraid of messing up my site (again). My NextGen Gallery can be seen here with the default boring square thumbnails: http://www.mattrice.comuf.com/wordpress/photos/photos-4-0/

Any help is appreciated!

Cecelia
Aug 26, 2012 at 1:07 pm

Hi Matthew,

I’m having the same problem. Did they respond to you? If so, what was there response?

Peace,
Cecelia

Fran
Oct 7, 2012 at 3:36 pm

I made a tutorial here, in order to apply this great tool to NextGen Gallery –> http://www.ajwan.net/wordpress/tutti-frutti/nextgen-custom-themes/
I hope it’ll help

Alex
Mar 26, 2012 at 2:52 pm

Could you please tell me is there is a way to create something like the Featured Kittens section on http://PersianKittenEmpire.Com

Get all the thumbnails close together with effects.

Please let me know,
Thanks!

Sara
Mar 31, 2012 at 7:01 am

Great!! just what I needed. Thanks a lot! :)

bitkisel
May 2, 2012 at 1:13 pm

Thank you Thank you!! This is organized very nicelytt

crudu ctin
May 6, 2012 at 1:01 am

where is the code for :roudend corner:?

yarandi
Jun 10, 2012 at 3:43 pm

very nice…!
but i have a little problem , i use this method
http://www.webdesignerwall.com/demo/decorative-gallery/2_photo-with-text.html
and my bullet show in left picture, i want delete li bullet in this.
can any one help me?

bart
Jul 2, 2012 at 6:47 pm

Wow, great! I try this Cork Board Gallery!

Adward
Jul 3, 2012 at 12:03 pm

where is the code for :roudend corner:?

cheap hcg drops canada
Jul 17, 2012 at 6:20 am

I am curious to find out what blog system you’re utilizing? I’m experiencing some small security issues with my latest website and I would like to find something more secure. Do you have any recommendations?

etaireia security
Aug 19, 2012 at 7:55 am

I stumbled on this while googling for some lyrics, I’ll be sure to come back. thanks for sharing.

Cecelia
Aug 26, 2012 at 8:04 pm

Can you please explain specifically how to apply this to NextGen gallery thumbnails in WordPress? I would like to use the gold frame thumbnail.
You can see my plain thumbnails here http://stlcatholic1.larryjacob.com/priests-deacons/

Thank you so much!!!

Ojan
Oct 2, 2012 at 9:36 pm

I’m so glad, found this tutorial. Thank you very much..

Tom Key
Oct 9, 2012 at 3:06 pm

This frames are for one size of thumbnails only?

Yuri
Nov 14, 2012 at 4:58 am

Very very beauty :)
tnx to share !
Have a nice day ^_^

net true
Dec 18, 2016 at 10:46 pm

Very very beauty :) Thank you for share

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.