Create Resizing Thumbnails Using Overflow Property

written on:14 Feb, 2008 by Alen Grakalic

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.

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 large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for contract work.

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

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:

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... :)