Create Resizing Thumbnails Using Overflow Property

posted on:February 14, 2008

Create Resizing Thumbnails Using Overflow Property

This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don’t have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.

Take a look at the demo
| Download zip file

Overview

What we have here is not actual image resizing. It is a resizing of the thumb’s visible area on mouse over. How do we do that? Using overflow property!

The overflow property defines the appearance of the content when it overflows the container area. If the container has limited size, for one reason or another, then we use overflow to define what happens. Possible values of overflow property are visible, hidden, scroll and auto. It’s the combination of these values that we will use here and make this trick work. Basically, we will hide a part of the thumbnail when in default state, and show it entirely on mouse over.

The Concept

The idea behind this is, to place an image into a certain container. Since we’re talking about thumbnails that container would be an <a> tag. We set the size (width and height) of the container to desired values and we set the position property of the container to relative. Image inside has an absolute position. We use negative top and left values to offset the image. Container has overflow set to hidden so only a part of the image that is placed inside the container’s actual area will be visible. The rest of it will be hidden. On a:hover we set the container’s overflow to visible, and reveal entire image.

The Code

This trick can be used for thumbnail lists or single thumbnails, as shown on the demo page. For markup we use standard tags

Definition of the default state for thumbnails would be something like this:

	ul#thumbs a{
		display:block;
		float:left;
		px;
		px;
		line-px;
		overflow:hidden;
		position:relative;
		z-index:1;		
	}
	ul#thumbs a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;	
	}

<a> tag has defined width and height to whatever fits into our site’s design. Also, overflow is set to hidden. We then play with negative top and left values to "crop" the image to a perfect fit. If you want to take this further, you can define cropping area for every single image you have in thumb list and target the area you would like to show.

 	
	ul#thumbs a img{
		float:left;
		position:absolute;
		top:-20px;
		left:-50px;	
	}
	ul#thumbs li#image1 a img{
		top:-28px;
		left:-55px;	
	}	
	ul#thumbs li#image2 a img{
		top:-18px;
		left:-48px;	
	}	
	ul#thumbs li#image3 a img{
		top:-21px;
		left:-30px;	
	}	
	.
	.
	.

Now, when user mouse-overs it we set the overflow to visible:

		ul#thumbs a:hover{
			overflow:visible;
			z-index:1000;
			border:none;		
		}

Note the z-index for both default and hovered container. This is very important because we want to place the hovered above it’s siblings. Otherwise it would be placed below and the trick wouldn’t be complete.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (83 Comments)

3kolone
February 14, 2008

Great one again...
Catar4x
February 14, 2008

Very, very great !
Gloria
February 14, 2008

and what if the interesting part of my image is on the left side? it will become hidden.... mmmm... not so good.
cssglobe
February 14, 2008

Gloria, there's no such thing as smart cropping. Only humans can decide how to frame an image. As I said in this article, you can manually define cropping area for every thumb easily by adding specific top and left values.
Ywg
February 14, 2008

Original use of the overflox property. I'll just notice one single detail that can be imporoved : ul#thumbs a{ display:block; float:left; //[...] } Display block is useless here, because floating an element instantly make it a block : whatever the display property specifies (even if the cascade evaluation is superior) a floating element can be and is ALWAYS a block.
cssglobe
February 14, 2008

Ywg, yes you right, I know :) I have a habit of adding display property everywhere.
EmanuelBlagonic
February 14, 2008

Looks really nice :)
Philippine Goji Juice
February 15, 2008

great post. i liked it...
Megan
February 15, 2008

Awesome Post. Great Tuterial. The graphic design added a great breaker to keep our attention. Kudos good job Megan
flisterz
February 15, 2008

wow I've been looking for this thumbnail thing for a long time. but not the hover. but this can be a good start. thanks!
mbhayes
February 15, 2008

Brilliant -- love pure css solutions that stay more away from the js framework stuff -- though alot of that stuff is very usable as well. Thanks for the post!
Brian Rock
February 15, 2008

Great tip. Seems to be compatible with major browsers, too. Tested in Firefox and Opera and both worked flawlessly.
Eric Wendelin
February 16, 2008

Wow I really like the simplicity of this idea. Nothing fancy and no complex JavaScript. Very nice.
Pozycjonowanie
February 16, 2008

Great, I'll use it!
bojan
February 16, 2008

nice one Alen, thanks :)
Pepe
February 20, 2008

Great. Exactly what i was looking for :) I also came up with an idea: If you have more thumbnails of different width and height and you always want to display the center of the thumbnail you can easily find out which values you have to use for the "top:" and "left:" properties by using the following formula: width-1 = the actual width of the real thumbnail width-2 = the width you have used in ul#thumbs a padding = the padding of the image or the p element, as used in the demo - value = (width-1 - width-2) / 2 + padding And the same formula for the height. And I also found out, that by using this formula and by adding left: -1px; (probably the size of the border, not quite sure) top: -1px; to ul#thumbs a:hover, you can avoid the image-position jumping a few pixels on hovering the image.
Sangesh
February 20, 2008

This is a great tutorial. Thanks for this.
Shreemani
February 20, 2008

This looks really nice. I like it.
Tristan Bethe
February 20, 2008

Cool might use something like this on our site in the future. Although i share gloria's concers about the hidden parts. but i also think i should not presume to much without trying it in the real world. thanks for the article
kab
February 20, 2008

This is a very nice idea, indeed. Could you add information to browser-compatibility in the article?
Dave
February 22, 2008

Great article, but I have to join with kab in politely requesting information on browser compatibility.
cssglobe
February 22, 2008

Kab, sorry for not replying earlier. This code is tested in ie6, Opera 9.23, FF 2.0.0.4 on Win, FF 2.0.0.12 Mac and Safari. Worked well in all of them.
kab
February 24, 2008

Ah, thank you. It may be usefull to add the compatibility information at the end of the article.
Services Group
February 25, 2008

Very cool technique for dealing with thumbnail images. I'm impressed by the lack of javascript, but easy thumb resizing using css.
Tom
February 26, 2008

Nice one, I love these CSS tips. Anyway I prefer the single image solution, rather than the gallery.
Pablo
February 27, 2008

Tom, what do you prefer versus this solution? How do you present images/photos in your websites? Is it CSS made too? Thanks
varmisin yokmusun
February 28, 2008

Hi.This is a great tutorial. Thank you
is ilanlari
February 28, 2008

great article thank you
adriana mullen
February 29, 2008

Very informative. Thank you
Lewis David
March 7, 2008

for resizing, check out www.reshade.com. It's the best and you can use it online
Simon James
March 8, 2008

Very cleaver. Nice one.
Forumistan
March 14, 2008

That looks great, thanks a lot...
polarizer
March 19, 2008

That's as simple as cute. Thx you for sharing your approach. It surely can make the use of gallery scripts unnecessary sometimes and helps to speed up your site that way. the polarizer
Mike
March 21, 2008

OK, I really love this, but I need it to do something *slightly* different and can't quite figure out how. Basically, what this script is doing is cropping the visible image area until you hover over it, right? So, what I need is to do is resize the image, instead of cropping it. Basically, I have a thumbnail I want scale down a bit, but then when I hover over it I want to show the full-size image, using the same nice look the demo shows here. Any ideas for me?
Muhammad Usman
March 25, 2008

Very very nice tutorial, thankyou for sharing this great css trick
Val
April 10, 2008

Nice effect ;)
AG
April 16, 2008

Same question as Mike above. Need to resize the thumb when hover over image. Tried to apply this idea, works fine in FF and others I guess. In IE6, after hovering, it doesn't return the image to the smaller size thumb as in the normal state.
AG
April 16, 2008

Well, a little more testing and here's a solution for thumbs without cropping: .thumbs a { display:block; px; px; line-px; position:relative; z-index:1; } .thumbs a img {/* original img is 150x150px resized to 75x75 */ px; px; position:absolute; } .thumbs a:hover { position:relative; overflow:visible; z-index:1000; } .thumbs a:hover img { px; px; } html: <div><a class="#"><img src="/img/spacer.gif">
oyunlar
April 19, 2008

good code I will store
kuafÃ¶r malzemeleri
May 7, 2008

wooow very good sample. i will try it on my site as soon as possible. thanks for the demo and example code also.
Sim Kamsan
May 20, 2008

wow great tutorial. thanks
herzausgold
May 21, 2008

i just created a version, that comes with real thumbnails. so there is no scaled version of the original img. useful when you want your thumbnails beeing black and white. i posted it on my website: blog.ausgold.de/admin/2008/css-thumbnails-mit-vergroserung/ and made a demopage that comes in englisch.
b
May 21, 2008

Maybe the trick is good but it is complete missuse considering what are thenthumbnails intended to serve. Thumbnail = SMALL file size. Whith this trick you actualy load the complete galery with FULL picture file size. One picture - ok, maybe few, galery - NO!
Alex
May 27, 2008

very nice tutorial :)
Don
June 5, 2008

brilliant tutorial man very useful, i just recently started tweaking and mucking about and this has been very useful.
Pepe
June 12, 2008

Great Tutorial, I used it in the Gallery of my Bandpage. Keep going.
Astyan Tanks Bitter
June 14, 2008

This looks really nice. I like it. Original use of the overflow property. Thanks for the article.
josterr
June 19, 2008

Thankyou for sharing this great css trick, very very nice tutorial.
Ionut Bucur
June 25, 2008

Bookmarked!!! Very nice, thank you! I'll be around... :)
Zim
July 8, 2008

Thanks for this, it was inspiring (in a web-design way)
Oyun
July 9, 2008

very thanks for you.. good nice tutorial
Michael Study
July 9, 2008

Its looks great, thanks a lot...
utility warehouse
July 21, 2008

Thankyou for sharing this great css trick, very very nice tutorial.
toner
August 12, 2008

brilliant tutorial man very useful, i just recently started tweaking and mucking about and this has been very useful.
Otel
September 4, 2008

very thanks OteL
Dominic Turner, Bristol
November 12, 2008

I have used this method to make a version which handles variable size images - simply put an extra div in around the image of width = 1000px and set the offset of the parent to -500px. Then you just need margin:auto to center the image within its new container - result is that it is always centered and cropped down to specified size - works well with my member photos: <div style="border:solid 5px #006f50; padding:5px; background-color:#d8e9cd; px; px; position:relative; overflow:hidden; text-align:center;" >  <div style="px; px;line-px;vertical-align:middle; text-align:center; top:-420px; left:-420px; position:absolute; overflow:hidden; " > <img src="/img/spacer.gif">
Estetik
November 16, 2008

I'm guessing the only way to do this in Javascript would be to use the onresize event, and then using the resizeTo method to attempt to keep the window at the size you want?
Estetik
November 25, 2008

By the way, the stacking only happens on firefox. I am on v 3.0.1. Explorer, opera and safari seem OK.
film izle
November 28, 2008

brilliant tutorial man very useful, i just recently started tweaking and mucking about and this has been very useful. thanks a lots of..
chat
December 6, 2008

thanks very.
savaÅŸ oyunu
December 27, 2008

i have followed your writing for a long time.really you have given very successful information. In spite of my english trouale,I am trying to read and understand your writing. And i am following frequently.I hope that you will be with us together with much more scharings. I hope that your success will go on.
oyun
December 31, 2008

i have followed your writing for a long time.really you have given very successful information. In spite of my english trouale,I am trying to read and understand your writing. And i am following frequently.I hope that you will be with us together with much more scharings. I hope that your success will go on.
sproutysem
January 3, 2009

Awesome! I got this to work under virtuemart/joomla for a image-based product store (not done yet, but you can see it working). Thanks for your help.
Luciano Santa BrÃgida
January 5, 2009

Great Job! But it really doesn't seem to work on IE7, or perhaps I got something wrong. My code: .postleft p a { display:block; px; px; overflow:hidden; z-index:1; } .postleft p a img { float:left; position:relative; top:-150px; left:-200px; } .postleft p a:hover { overflow:visible; z-index:1000; border:none; } These values are the ones working for my photoblog. Is there something else i should so it can work in IE7 without javascripting?