Journal
Hoverbox Image Gallery
28 February 2006 › 83 comments
Update: Hoverbox code is free to use, so do with it whatever you want in your own projects. I just ask that you not redistribute the code via template sharing repositories, because I occasionally make updates to ensure multiple browser compatibility. If you do want to spread the word, simply link to this page so that people are always getting the most updated version.
Additionally, thanks to Craig Erskine this now works without the extraneous, meaningless span. Please read through the comments to see all the possible ways you can customize this code. Check out Craig’s example page – here.
Original Article:
I recently finished reading CSS Mastery, and think I’ve finally got a good understanding of how absolute and relative positioning (fail to) work in Internet Explorer. I have been tinkering with this bit of code since yesterday afternoon, helping out a designer friend with his client’s site. However, we decided to go a slightly different route for their gallery. So, I pass it on to you with the hope that it proves useful. Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS…
Hoverbox: View Example | Download Here (280 KB)
It uses an anchor link for the effect, because that is the only thing that Internet Explorer allows the :hover psuedo-class to work with. While my example page only has # linked to, this could easily be pointed to a full version of the respective images, or a website if you decide to use it for a design portfolio. For now, it uses photos taken by family and friends.
I decided to call it Hoverbox, because after showing it to Dustin, he said it was like a mini Lightbox. While my example is nowhere near as cool as those, it does have the same principle in mind, popping up an image without affecting a page’s layout. Being that it’s triggered by a mouse a:hover, the silly name was born. I also like the fact Hoverbox works with JavaScript disabled.
It has been tested in the current builds of all the latest major browsers and works in Camino, Firefox, IE6, Opera and Safari. So, I’m assuming it works in most Gecko based engines. The effect itself even works in IE5.5, but I haven’t bothered to support it because serveral years is ample time for users to have upgraded to version 6. With all that out of the way, here’s how it works…
The magic happens on a:hover, when .preview in the link goes from having display: none; to display: block; with absolute positioning and negative values for top and left. In good browsers, it is positioned according to the containing li, which is set to display: relative, but in Internet Explorer 6 + 7, conditional comments place the positioning on the containing a href.
Due to the differences in border / padding on the li, the offset in pixels is overridden for IE6. This corrects for the smaller dimenions of the link, equal to the total width the img plus its border and padding. I tried just using -50% for both top and left, but Opera seemed to choke on the percentage values.
To save on loading time, I am only using one image for both the thumbnail and the roll-over preview, but you could just as easily have separate files for each instance, if you so desire. It just depends if the graininess of forced constraints on dimensions bothers you or not. The reason I load each image twice, instead of just increasing the size of a single image on roll-over is due to the inconsistent shifts this causes in the page layout. So, while there is minor redunancy, it beats having to pre-cache the images with JavaScript.
Note: While I developed this code and example entirely by myself, before posting this article, I did some searching around and came upon this example by John Oxton. I had a sinking feeling in my stomach because of some of the similarities, but I think my demo is unique enough to stand on its own merit.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Jeff Croft
Very nice! I also like that it works without Javascript, but it might be cool to add some bonus Javascript for those that have it—it would be neat if the image “grew” to the hovered size. :)
Great stuff.
#2 Ozh
Very nice and neat, me likes.
#3 soxiam
As much as I hate to disagree with Jeff Croft… the ONLY reason why this appeals to me is the lack of javascript. Nice work.
#4 Andy Knight
Oh so cool, Nathan. Way to go!
#5 Tony Geer
Really nice work, I like it.
#6 Natalie
I know that sinking feeling. :) There are a ton of great demos out there, but you likely have quite a few readers that don’t read Oxton. It’s always nice to see new ways of doing things and your code is always so nice and clean I love seeing how you make it work. As much as I hate using spans in lists or links when I don’t have to, it’s nice to know that capability is there!
Oh, and if you had Ma.gnolia with your del.icio.us and newsvine bookmarks I’d bookmark this post right now! :)
#7 Dennis Bullock
Very nice Nathan. After seeing it done it makes a lot of sense.
#8 Justin Perkins
Great tutorial and great idea, we need better photo galleries! Thanks.
#9 toto e
nice work. greetings from Germany! Thankx for sharing.
t
#10 Anders G
The images will be displayed twice if you disable CSS. I suppose setting the popup image as a background will fix this.
But a nice script :)
#11 Nathan Smith
Anders: Um – yeah, like I said: that’s so that people can use a different file for the thumbnail if they feel like it. Putting it as a background image would just be unecessarily complicated, defeating the whole purpose of the demo. Please people, read the whole article, if you’re going to comment. Thanks.
#12 Jirí Sekera
I really don’t want to be troublesome but where’s the point if you load all images fullsized, only transformed by browser?
Of course, it’s funny, but sometimes IE, for example, download every single image, no matter if it’s already in cache. In this case i have to download 320 kB of images which i maybe don’t like at first sight. It’s unusable without mouse, by the way.
#13 Nathan Smith
Jirí: Not to over-state the obvious, but a
:hovereffect is only triggered by a mouse. As to your comment about loading all images full-sized, please see the comment above yours and if need be, go back and re-read the article.#14 Elliot Swan
That’s pretty sweet.
You could probably get rid of the extra span by giving the :hover image a class, and using that as a selector instead…Just a thought.
#15 Webdawson
Love it :)
#16 Nathan Smith
Elliot: Yeah, that’s a good idea. I tried it, but unfortunately it had some funky cross-browser results. Feel free to try it yourself, and let me know if it works.
#17 Craig
You could probably add a :focus and :active to your CSS so that it could be used with a keyboard.
I wonder if there is a way to do this without the span and the extra image…
#18 Nathan Smith
Craig: That’s a good idea. I’m just wondering how Opera would handle it, since their
:focussupport is somewhat lacking. Feel free to improve upon it, just let me know what you find out. I’d like to see what you come up with.#19 Dustin Diaz
It was cool indeed. Now is the time to take advantage of the :hover pseudo-class :)
With a tiny incy weency bit of JavaScript you can aid IE6 to have the appropriate behavior.
Other than that, I like its pure CSSness.
#20 Mohodin Rageh
It is very a good gallery. I like its simplicity and the pure CSS solution that you have provided. Way too cool. It really rocks. Thanks.
Don’t worry about John Oxton developing this earlier. That was a year ago and many many people, I am sure, have not seen it.
#21 Nathan Smith
Dustin: Actually, now this does work in IE6, as far as I can tell. I’m not sure what you’re referring to about JavaScript aiding its behavior. Please explain.
#22 JRichmond
I just tried out Craig’s idea of adding classes for :focus and :active to add keyboard support.
It works beautifully in Firefox. It doesn’t work in Opera and IE is really hit an miss, and does some really bizarre overlapping stuff when it does work.
#23 Craig
Check it out
No span, no duplicate image, :focus and :active states added. Tested and works in Firefox, IE 6 and Opera. Of course Opera doesn’t seem to like the :focus and :active keyboard stuff but everyone else digs it.
#24 Natalie
After reading some of the comments this morning, I’m thinking I shouldn’t post anything like this myself! You do a great job keeping folks in line. I agree… reading the entire post (maybe twice) is a good plan. Good to know what a person is saying before antagonizing.
Craig, you’ve got a beautiful domain over there. I’ll have to spend more time looky-looing. And I really dig your addition/changes to Nathan’s demo. It’s nice and clean, but even moreso (didn’t think it was possible). I especially love the absent spans. It makes it possible to do something like this with an existing gallery just changing the CSS.
#25 JRichmond
Craig –
Did the :focus and :active actually work for you on IE 6?
#26 Nathan Smith
Craig: Thanks for those improvements! When I get a spare minute, I’ll impliment the changes, to remove the span. I think the extra image could be beneficial, depending on if people wanted to have a cropped thumbnail, and a fuller preview. I’ll try to encorporate a few different flavors, for some choices, since the
:focussupport is sketchy in IE and non-existent in Opera.#27 Craig
JR: Like you said… it is hit or miss in IE. It works sometimes and other times it doesn’t. But, do you really think there are handicapped users out there that don’t use a more accessible browser than IE? I wouldn’t worry about it too much.
Nate: I’m not saying that you need to remove the second img or change your demo. It’s very well done and probably works in more browsers than mine does. I’m just offering another solution to those who are complaining about the span and extra download time.
Keep up the great work. Maybe we could collaborate on some stuff in the future. I bet if we both worked on a killer CSS technique it would destroy.
#28 Leopold Porkstacker
Really nice technique. I, too, like very much the fact that the code consists of CSS and XHTML instead of relying on JavaScript.
-he who stacks pork
#29 Justin Perkins
Nathan
I think Dustin is saying don’t use anchors and use JS to add the behavior for the :hover for IE.
I like using anchors because, well, it works without JS. Also, linking to larger versions of the photos only makes sense (like you said Nathan).
#30 Bert Glass
Some variations:
http://cssplay.co.uk/menu/zero_dollars.html
http://cssplay.co.uk/menu/gallery.html
http://cssplay.co.uk/menu/gallery_click.html
#31 Nathan Smith
Craig: Yeah definitely, I’d be down for some collaborative stuff. I don’t know how much our monster would destroy, but it’d be pretty dang cool! Just let me know if you have some ideas for a cool project / CSS technique.
Justin: Thanks for the clarification. I agree, there are so many ways that this could be done. I just wanted to sort of challenge myself, to see if I could pull it off without JavaScript (since I stink at JS).
Bert: Thanks for those variations. I just knew that Stu had probably already done something similar, but I asked around and nobody had seen anything exactly like my demo. His gallery example is more like what I’ll be doing for my friend’s client project, that I’m helping out with.
#32 Nathan Logan
Very, very cool, Nathan. Nothing to say except that I’m impressed and thanks for sharing!
#33 Ritz
Ya! Boise State! Woooooo!
Haven’t been to a smurf-turf game in a couple years…
Excellent job with the gallery, too.
#34 Peter Flaschner
Very nice work Nathan. Thanks!
#35 david b
one word: insain! this is great Nathan. you did such a great job on this i used it as an example in my PHP ‘read directory’ tutorial: read directory gallery
#36 trovster
Sorry, I don’t like it. I don’t like the source having repeat images, and I certainly don’t like how you’ve scaling the images with CSS. JS is the perfect way of adding this effect of adding functionality/behaviour. Key word is adding.
#37 Jonas K. Sekamane
How does it look, if the pictures have diffrent dimensions? eg. if some of the pictures orientation is ‘Portrait’ and others ‘Landscape’.
#38 Mohodin Rageh
Craig’s solution is much cleaner. Man! I am always a sucker for a clean and compact code. But still, as Jonas asked at comment 37, how about if images are of different sizes? I asked that because dimensions are set in CSS code and cannot be varied of course.
I may have to do some tinkering and see what happens. But in the mean time, Do you have sugestions on that? Great work Craig.
#39 Jason Beaird
Great stuff Nathan! I’m not sure how I’m going to use it yet, but You’ve got me tinkering with the idea.
Mohodin: For consistency and float prettiness you would probably want to crop all your thumbnails down to the same size. I’m playing around with ZenPhoto for my gallery engine, which already creates the small thumbnail. For the second image, you could use a larger thumbnail that is constrained to a specific width and the height can vary depending if it’s landscape/portrait. Then, just remove the img height and width info from the css.
#40 Nathan Smith
Trovster: Allow me to just say that I think you've completely missed the point, and probably could benefit from really reading through the article more slowly. Not to be mean, but I think you'd get a better grasp on how it works.
Jonas / Mohodin: What Jason said is true, about the different landscape vs. portrait aspect ratios. However, if your images are different sizes, the positioning in negative pixels probably won’t work. You could try
-50%for the top and left offsets, but that doesn’t work consistently in all browsers.#41 Jason Beaird
I’m weary of posting this because the site isn’t NEAR done yet, but I incorporated the hoverbox into the ZenPhoto galleries for the next version of amesnjas.com.
http://www.amesnjas.com/photos/snowtubing/
This is a good example of what I was talking about in comment 39 because there are a couple vertical shots. (Near the bottom, look for the one where ZenPhoto cropped off my head!)
I plan to customize the gallery a lot more but for now, Nathan’s default styles look pretty darn nice. :)
#42 Nathan Smith
Dang Jason, that turned out really nice. Thanks for linking to it, because it makes my default styles look good! Please let me know when it’s finalized.
#43 Anders G
@Nathan (comment 11):
I did read the whole article, but I understand my comment was wobbly. I wanted to suggest a way to reach somewhat the same result with only one image tag to make the markup a bit more semantic, which Craig seemed to manage great.
#44 Nathan Smith
Anders: No worries. It seems like people would have complained, no matter what method I used. The good news is, it can work either way, so this has some very versatile possibilities. You’re right, Craig’s version is quite nice.
#45 david b
Craigs is cleaner but its sketchy in IE, he said so himself. I tried his a couple tiems and I see what hes saying. in IE if you click an image sometimes it gets stuck in the hover state until you click on an enmpty space on the page.
@Trovster , Jonas if you dont like the duel images or have images with different proportions you could use either css to rectangular clip and then float the images next to each other to produce thumbnails. Or since with css of that still leaves duplicate images, you could use php to create the thumbnail (which i am about to write up a tutorial on also ;)
update: Dynamic thumbnail creation
And since php is client side you would still have the added benefit of having this work even if java is disabled.
edit: i knew somebody was going to beat me to the punch in the comments, but i wanted to wait til i had the tutorial written.
#46 Nathan Smith
David: “And since php is client side you would still have the added benefit of having this work even if java is disabled.” – I think you mean PHP operates on the server side, and works even if JavaScript is disabled. Btw, nice tutorial!
#47 david b
hahaha yeah yeah you know what i mean. lol, my brain is mush, i wrote two tutorials in the course of 24 hours. and while that might not seem much to some. i happen not to consider myself a writter which can be seen in my once a month (if that) blog! thx man. hey since you have our emails. can you put me intouch with Craig? I want to see if can communicate and come up with something so that all the people calling for one image can be happy.
#48 Nathan Smith
David: Just send Craig a quick note from the contact form over at his site: solarDreamStudios. He’s a pretty helpful guy, but is usually incredibly busy.
#49 Mark Priestap
Nice work Nathan!
#50 Jo
Just to say, thanks a bunch for this! It’s really great to find interesting page content that will work on a site with JS disabled, and this is fantastic. Thanks again :D
#51 Chris L
Thats some sweet stuff man. I really like it, thanks!
#52 Erwin Heiser
Very nice, just might use this in an upcoming project…well done!
#53 david b
somebody aksed me to combine light box and this script on stylegala. jsut thought i’d share.
Combination of hover and light box
#54 Nathan Smith
Nice job! Though, I would suggest cropping the various hover previews to the a square aspect ratio, and let Lightbox hangle the arbitrary full sized images.
#55 Igor Ostrovsky
Nathan, you are god! Thank you for a wonderful gallery.
#56 Nathan Smith
Igor: You’re welcome for the gallery, but I’m absolutely convinced that the position of God has already been filled. I am far from perfect, believe me.
#57 david b
“position of God” hahaha so true.
yeah I may just do that. only thing is i dont want to create another thumbnail for the preview. thats why i was telling tzmedia from stylegala this is probably over kill, but since i had a few minutes and the files next to each other, i did it ;)
#58 Zeerus
Thanks for creating such a great looking gallery Nathan, this couldn’t have come at a better time. I recently started working on a new project and was looking for a good gallery to display paid advertisements for people looking to advertise on the site. Next thing I know your feed updates in my reader and this beauty pops up.
great job, I’ll be sure to send you the final result when it’s ready for viewing (April 1st)
#59 Danny Foo
Excellent!
Though I think the larger image size by using this method will be constricted so that it doesn’t overlap the other hovers to other images.
However, this is definetely a solution for galleries that want to use the Lightbox method without taking the user entirely away. :)
Cheers.
#60 Nathan Smith
Zeerus: You’re welcome. Be sure to let me know when your project is done in April. I would like to see how it turns out, and how the advertisers react to it.
Danny: Yeah, that’s one of the big drawbacks of this method. I’d recommend not using a size larger than 200% of the original size for the mouse hover.
#61 Nigel O Toole
Well done Nathan I think Hoverbox is brilliant and Ive incorporated it into my website.
But there are some problems, the link doesnt work on the hovered image in Internet Explorer.
The new version solves this problem but it also leaves the image you clicked on in its hover state when you go back to the originating page.
Any ideas?
Thanks
#62 Nathan Smith
Nigel: Assuming you’re talking about Craig’s version – I would recommend removing the absolute / re-sizing on the
a:activeanda:focus, that way it won’t maintain its size. The reason it currently does this is because Internet Explorer is indicating the link that was clicked on to leave your page.#63 Geoff
Im going mad with this….
first things first this gallery script is very nice i love it, its perfect for my personal project and i cant thank Nathan enough for the time and effort in relasing this to the masses however for one reason or another the hover effects just wont work for me in IE.
(work fine in download example with ie just not when i incorporate into my own design)
I have made no changes to the IE hax section and have only changed values related to width and layout within the css as not to scupper my design just dont understand it. Typically everything is working super smashing great in FF
im off to the garden to eat worms.
#64 Nathan Smith
Geoff: I’m not sure what to tell you bro. If it works fine in my example, but breaks in your site, you might want to go back through and check your code validation, etc. and make sure that the hoverbox isn’t inheriting anything from your main site’s CSS. It’s tough to say, without seeing your actual live site.
#65 Geoff
WOW, many thanks for replying Nathan, I really appreciate it…
please dont laugh, im still very new too all this webstuff…
here is the link with your code injected into my page.
http://www.crazypixel.co.uk/kyle/portfolio.html
any suggestions like start again much appreciated.
#66 Geoff
Update,
Strange thing Nathan, if when in IE you right mouse and select properties the large image appears but wont go away then :(
im conffuzzled
#67 Nathan Smith
Geoff: Hmm, I checked my CSS and it shouldn’t be a problem. You might want to validate your HTML first though. There are a few errors there.
#68 tylerG
Have you given any thought to a solution for adding a caption or link text beneath each thumbnail, I’m working on it. Not sure I’ve got the tools in “my toolbox” to come up with the solution, if you know what I mean ;)
Started a thread on stylegala forum’s, maybe I’ll get some help there.
It would be an awesome addition to the hoverbox though.
Thanks for the excellent gallery nathan.
It’s so easy to edit batch images, I just completed a 200 image 8 page layout.
#69 Nathan Smith
Well, the caption / description would be possible pretty easily, but “text link” would not, being that this entire technique is wrapped in one giant link. If you really must have caption text, just put the entire pop-up area in a span, and remove the preview class from the second image, styling the span instead.
#70 Ty Gossman
Hi all :)
I was able to hack up a bit of a version that incorporates captions using a paragraph tag. The css requires one extra class. Check it out here:
http://godiscgolf.com/hoverbox/hbcaptions.htm
Thanks for your help and suggestions Nathan!
#71 Jennifer
I used this for a free stock image gallery. I put 40 images per page and with 1 click you can download a zip. It is outstanding and very fast even with 40 images! Well done and thank you.
#72 Mauro
I’d like to thank you for this photo gallery. I was looking for something made only with css and finally I found it. It’s fast and light, and I don’t need to have both thumbs and images. Bien à toi!
#73 flo
hello,
thanks nathan! great way of doing what i was failing with for a quite a while now.
the only thing i’d love to do and can’t figure out is if there is a way of having the .preview as a view of the original image size. since i work with images of lots of different formats, this would be grat to have. there’s no bother a bout the thumbnails though. they can be uniformly “squeezed”, but just to have the pop-up be the original size is what i am trying to do.
would that be a ”%” value in the .hoverbox .preview? i have tried to duplicate the code and make several classes (one for landscape and one for portrait for now) but most of my images have very unique dimensions.
any clues? all help much appreciated!
greetings
ps: will reference to you ishould i finally bind it in my site. hope that’s ok.
#74 flo
having a look at the code of david b’s version, mine and the original, the answer to my question is embarrassingly simple. sorry, i’m a n00b to css! thanks again. ;)
#75 Nigel O Toole
Thanks for your help Nathan I now have hoverbox working great on my website.
Keep up the good work.
#76 Nathan Smith
Hey, thanks to all who downloaded and implimented the Hoverbox CSS! I’m amazed at the overwhelmingly positive feedback. It means a lot to me. :)
#77 Casey Parsons
Hey Nathan et al.
Thanks for your great work and sharing your talents! I am a new web designer, and am trying to use your photo gallery on my site. For some reason, I can’t get it to work in Internet Explorer. I am having many of the same issues Geoff described earlier in the comments. It works great in Firefox, but the :hover thumbnail isn’t working in IE. I have not changed one single bit of code. I imagine that something in my CSS was inherited and screwed it up, but I can’t find where. Can anyone help? Thanks!
Casey
www.thealliesquartet.com/media
#78 Mauricio Samy Silva
Hi Natan,
I was playing with the hoverbox CSS code in order to provide the brazilian portuguese adapted tutorial, as you’ve already give me the permission via email.
Well, I’ve noticed that a
font-sizeCSS declaration for the body element, breaks IE6!People (as I do) frequently resets 1.0em to 10px in the CSS body declaration via something like:
body {font: 62.5% Arial, Helvetica, Sans-serif; /* This breaks IE6 */}And, I suggest the following fix:
* html .hoverbox a:hover {font-size:100%;99.99%;z-index: 1;}Regards,
Mauricio
#79 Mauricio Samy Silva
Hi Casey,
I’ve had a look and play with your CSS, via an IE developer tool bar and discover that my fix solves your problem ;-)
#80 Casey Parsons
Mauricio,
Thanks for the help! That did fix the display problem!
Now does anyone know why my the layout looks jacked in IE?
Thanks,
Casey
www.thealliesquartet.com/media
#81 Mauricio Samy Silva
Hi Casey,
Add this rule to CSS:
.hoverbox {.............width:372px;}This will put IE in order!
PS: Nathan, here isn’t a forum I know (rs), so feel free to delete the 2 fixes that I posted for Casey. :-)
#82 Nathan Smith
No problem Mauricio, I appreciate those that are willing to help others in the comments, rather than just chime in to say “this sucks,” etc. Thanks!
#83 kenzo_77
Thanks for your great work and sharing.