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

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

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)

1. 3kolone
   February 14, 2008

   Great one again...

2. Catar4x
   February 14, 2008

   Very, very great !

3. 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.

4. 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.

5. 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.

6. cssglobe
   February 14, 2008

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

7. EmanuelBlagonic
   February 14, 2008

   Looks really nice :)

8. Philippine Goji Juice
   February 15, 2008

   great post. i liked it...

9. Megan
   February 15, 2008

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

10. 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!

11. 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!

12. Brian Rock
    February 15, 2008

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

13. Eric Wendelin
    February 16, 2008

    Wow I really like the simplicity of this idea. Nothing fancy and no complex JavaScript. Very nice.

14. Pozycjonowanie
    February 16, 2008

    Great, I'll use it!

15. bojan
    February 16, 2008

    nice one Alen, thanks :)

16. 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.

17. Sangesh
    February 20, 2008

    This is a great tutorial. Thanks for this.

18. Shreemani
    February 20, 2008

    This looks really nice. I like it.

19. 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

20. kab
    February 20, 2008

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

21. Dave
    February 22, 2008

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

22. 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.

23. kab
    February 24, 2008

    Ah, thank you. It may be usefull to add the compatibility information at the end of the article.

24. 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.

25. Tom
    February 26, 2008

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

26. 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

27. varmisin yokmusun
    February 28, 2008

    Hi.This is a great tutorial. Thank you

28. is ilanlari
    February 28, 2008

    great article thank you

29. adriana mullen
    February 29, 2008

    Very informative. Thank you

30. Lewis David
    March 7, 2008

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

31. Simon James
    March 8, 2008

    Very cleaver. Nice one.

32. Forumistan
    March 14, 2008

    That looks great, thanks a lot...

33. 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

34. 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?

35. Muhammad Usman
    March 25, 2008

    Very very nice tutorial, thankyou for sharing this great css trick

36. Val
    April 10, 2008

    Nice effect ;)

37. 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.

38. AG
    April 16, 2008

    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.

39. oyunlar
    April 19, 2008

    good code I will store

40. 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.

41. Sim Kamsan
    May 20, 2008

    wow great tutorial. thanks

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

43. 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!

44. Alex
    May 27, 2008

    very nice tutorial :)

45. Don
    June 5, 2008

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

46. Pepe
    June 12, 2008

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

47. Astyan Tanks Bitter
    June 14, 2008

    This looks really nice. I like it. Original use of the overflow property. Thanks for the article.

48. josterr
    June 19, 2008

    Thankyou for sharing this great css trick, very very nice tutorial.

49. Ionut Bucur
    June 25, 2008

    Bookmarked!!! Very nice, thank you! I'll be around... :)

50. Zim
    July 8, 2008

    Thanks for this, it was inspiring (in a web-design way)

51. Oyun
    July 9, 2008

    very thanks for you.. good nice tutorial

52. Michael Study
    July 9, 2008

    Its looks great, thanks a lot...

53. utility warehouse
    July 21, 2008

    Thankyou for sharing this great css trick, very very nice tutorial.

54. toner
    August 12, 2008

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

55. Otel
    September 4, 2008

    very thanks OteL

56. 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; width:150px; height:150px; position:relative; overflow:hidden; text-align:center;" > <!-- Centred inside a width of 150px with 5px padding all the way round --> <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>

57. 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?

58. 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.

59. 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..

60. chat
    December 6, 2008

    thanks very.

61. 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.

62. 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.

63. 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.

64. 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; 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?

65. komik oyunlar
    January 27, 2009

    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.

66. giysi giydirme oyunlari
    January 27, 2009

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

67. Rik Weber
    February 5, 2009

    Nice little technique - thanks for sharing

68. GazTruman
    February 9, 2009

    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!

69. Seo
    March 2, 2009

    This is great post. Congrats i often use wordpress. It can do this. Thanks anyway.

70. haberler
    March 2, 2009

    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.

71. sinava hazirlik
    March 2, 2009

    sinava hazirlik

72. ÅŸiÅŸme park
    March 2, 2009

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

73. alex
    March 6, 2009

    How to adjust script to make it show big image on mouseclick, and make it a) centered. b) dragable c) click to close

74. Matt
    March 16, 2009

    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"

75. Hosting
    March 18, 2009

    .postleft p a { display:block; width:600px; height:400px; overflow:hidden; z-index:1; } thanks

76. chat
    March 19, 2009

    thanks youu..

77. burun estetigi
    March 26, 2009

    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.

78. craig
    March 29, 2009

    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.

79. Az
    April 13, 2009

    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?

80. p31m
    April 29, 2009

    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?

81. Clark Smith
    May 29, 2009

    Great script, thanks! exactly what I was looking for...

82. suvish
    June 3, 2009

    great article buddy thanx for it i was lookin for some tutorial exactly like this for a long time.

83. sohbet chat
    June 21, 2009

    naber millet bu site iyiymiÅŸ sagolun varolun valla :D

Sorry, the comment form is closed at this time.