Create Resizing Thumbnails Using Overflow Property

Delicious | Digg | Stumble | Reddit | Subscribe to RSS Feed

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.

overflow thumbnails

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

<a href="#"><img src="image.jpg"  alt="my image" /></a>

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

	ul#thumbs a{
		display:block;
		float:left;
		width:100px;
		height:100px;
		line-height:100px;
		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.

About the author:

cssglobe's image Designer, developer and a passionate standardista with huge experience in all types of front-end work. I've been featured on numerous css galleries including famous Css Zen Garden official list. Drop me a line if you have work proposition or if you'd simply like to say hello.
To stay in touch, follow me on Twitter.

Enjoyed the article?

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

Delicious | Digg | Stumble | Reddit | Subscribe to RSS Feed

Comments

3kolone on 14 Feb, 2008 wrote:

Great one again...
Catar4x on 14 Feb, 2008 wrote:

Very, very great !
Gloria on 14 Feb, 2008 wrote:

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

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 on 14 Feb, 2008 wrote:

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 on 14 Feb, 2008 wrote:

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

Looks really nice :)
Philippine Goji Juice on 15 Feb, 2008 wrote:

great post. i liked it...
Megan on 15 Feb, 2008 wrote:

Awesome Post. Great Tuterial. The graphic design added a great breaker to keep our attention.

Kudos good job

Megan
flisterz on 15 Feb, 2008 wrote:

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 on 15 Feb, 2008 wrote:

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 on 15 Feb, 2008 wrote:

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

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

Great, I'll use it!
bojan on 16 Feb, 2008 wrote:

nice one Alen, thanks :)
Pepe on 20 Feb, 2008 wrote:

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 on 20 Feb, 2008 wrote:

This is a great tutorial. Thanks for this.
Shreemani on 20 Feb, 2008 wrote:

This looks really nice. I like it.
Tristan Bethe on 20 Feb, 2008 wrote:

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 on 20 Feb, 2008 wrote:

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

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

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 on 24 Feb, 2008 wrote:

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

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

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

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 on 28 Feb, 2008 wrote:

Hi.This is a great tutorial. Thank you
is ilanlari on 28 Feb, 2008 wrote:

great article thank you
adriana mullen on 29 Feb, 2008 wrote:

Very informative. Thank you
Lewis David on 7 Mar, 2008 wrote:

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

Very cleaver. Nice one.
Forumistan on 14 Mar, 2008 wrote:

That looks great, thanks a lot...
polarizer on 19 Mar, 2008 wrote:

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 on 21 Mar, 2008 wrote:

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 on 25 Mar, 2008 wrote:

Very very nice tutorial,
thankyou for sharing this great css trick
Val on 10 Apr, 2008 wrote:

Nice effect ;)
AG on 16 Apr, 2008 wrote:

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 on 16 Apr, 2008 wrote:

Well, a little more testing and here's a solution for thumbs without cropping:
.thumbs a {
display:block;
width:75px;
height:75px;
line-height:75px;
position:relative;
z-index:1;
}
.thumbs a img {/* original img is 150x150px resized to 75x75 */
width:75px;
height:75px;
position:absolute;
}
.thumbs a:hover {
position:relative;
overflow:visible;
z-index:1000;
}
.thumbs a:hover img {
width:150px;
height:150px;
}

html:
<div class="thumbs"><a href="#"><img src=".." /></a></div>

The original image is resized to 1/4 size and then displayed at full size when hover. Works in FF2x and IE6x.
oyunlar on 19 Apr, 2008 wrote:

good code I will store
kuaför malzemeleri on 7 May, 2008 wrote:

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 on 20 May, 2008 wrote:

wow great tutorial. thanks
herzausgold on 21 May, 2008 wrote:

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: http://blog.ausgold.de/admin/2008/css-thumbnails-mit-vergroserung/ and made a demopage that comes in englisch.
b on 21 May, 2008 wrote:

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 on 27 May, 2008 wrote:

very nice tutorial :)
Don on 5 Jun, 2008 wrote:

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

Great Tutorial,
I used it in the Gallery of my Bandpage.

Keep going.
Astyan Tanks Bitter on 14 Jun, 2008 wrote:

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

Thankyou for sharing this great css trick, very very nice tutorial.
Ionut Bucur on 25 Jun, 2008 wrote:

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

Thanks for this, it was inspiring (in a web-design way)
Oyun on 9 Jul, 2008 wrote:

very thanks for you.. good nice tutorial
Michael Study on 9 Jul, 2008 wrote:

Its looks great, thanks a lot...
utility warehouse on 21 Jul, 2008 wrote:

Thankyou for sharing this great css trick, very very nice tutorial.
toner on 12 Aug, 2008 wrote:

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

very thanks OteL
Dominic Turner, Bristol on 12 Nov, 2008 wrote:

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; width:150px; height:150px; position:relative; overflow:hidden; text-align:center;" >

<div style="width:1000px; height:1000px;line-height:1000px;vertical-align:middle; text-align:center; top:-420px; left:-420px; position:absolute; overflow:hidden; " >
<img src='example_any_size.gif'>
</div>
</div>
Estetik on 16 Nov, 2008 wrote:

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 on 25 Nov, 2008 wrote:

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

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

thanks very.
savaş oyunu on 27 Dec, 2008 wrote:

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 on 31 Dec, 2008 wrote:

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 on 3 Jan, 2009 wrote:

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 on 5 Jan, 2009 wrote:

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; width:600px; height:400px; 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?
komik oyunlar on 27 Jan, 2009 wrote:

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.
giysi giydirme oyunlari on 27 Jan, 2009 wrote:

brilliant tutorial man very useful, i just recently started tweaking and mucking about and this has been very useful. thanks a lots of..
Rik Weber on 5 Feb, 2009 wrote:

Nice little technique - thanks for sharing
GazTruman on 9 Feb, 2009 wrote:

Awesome, dont need the code for the hover magnify element, but the way it creates thumbnails is ideal! Much better than the clip css property which ive also seen used to create thumbnails.

Made a few changes to the code to suit my design, excellent work! Bookmarked for sure!
Seo on 2 Mar, 2009 wrote:

This is great post. Congrats i often use wordpress. It can do this. Thanks anyway.
haberler on 2 Mar, 2009 wrote:

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.
sinava hazirlik on 2 Mar, 2009 wrote:

sinava hazirlik
şişme park on 2 Mar, 2009 wrote:

By the way, the stacking only happens on firefox. I am on v 3.0.1. Explorer, opera and safari seem OK.
alex on 6 Mar, 2009 wrote:

How to adjust script to make it show big image on mouseclick, and make it a) centered. b) dragable c) click to close
Matt on 16 Mar, 2009 wrote:

Hmmm... very interesting way of doing this. I'm looking for a way to scale a thumbnail using css, but I don't think that can be done. I wish you could say, "for this style, scale the image to a max-width of 200px"
Hosting on 18 Mar, 2009 wrote:

.postleft p a { display:block; width:600px; height:400px; overflow:hidden; z-index:1; }
thanks
chat on 19 Mar, 2009 wrote:

thanks youu..
burun estetigi on 26 Mar, 2009 wrote:

Also, I too am getting the warning that yutaka is along with a few other similar ones about “Group”, “Link”, “Entry”, etc. It doesn’t seem to be breaking anything, just throwing a warning.
craig on 29 Mar, 2009 wrote:

this is a neat little tweak, i like it. by the way, how did you get the frame around your images in the demo? I can open in dreamweaver, but i see nowhere where the code is located. I'm kinda new to css, so forgive the dumb questions.
Az on 13 Apr, 2009 wrote:

great article!

one question though...how would i get this to work i preset the height and width in my img like so:

<img src="..." height="80" width="80" />

using the code you supplied it doesnt make the image bigger on mouse over with height and width set, is there a way to make the default stay as 80X80 and only on mouse over make the image bigger?
p31m on 29 Apr, 2009 wrote:

Can you suggest away to link a paragraph to each image. So when you hover over through thumbnail list the corresponding paragraph appears in another part of the page?
Clark Smith on 29 May, 2009 wrote:

Great script, thanks! exactly what I was looking for...
suvish on 3 Jun, 2009 wrote:

great article buddy thanx for it i was lookin for some tutorial exactly like this for a long time.
sohbet chat on 21 Jun, 2009 wrote:

naber millet bu site iyiymiş sagolun varolun valla :D

Sorry, further comments are disabled for this post.

Hey, you are not logged in!
Apply for a membership or login here.

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Css Globe