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.
3kolone 14 Feb, 2008
Catar4x 14 Feb, 2008
Gloria 14 Feb, 2008
cssglobe 14 Feb, 2008
Ywg 14 Feb, 2008
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 14 Feb, 2008
I have a habit of adding display property everywhere.
EmanuelBlagonic 14 Feb, 2008
Philippine Goji Juice 15 Feb, 2008
Megan 15 Feb, 2008
Kudos good job
Megan
flisterz 15 Feb, 2008
mbhayes 15 Feb, 2008
Thanks for the post!
Brian Rock 15 Feb, 2008
Eric Wendelin 16 Feb, 2008
Pozycjonowanie 16 Feb, 2008
bojan 16 Feb, 2008
Pepe 20 Feb, 2008
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 20 Feb, 2008
Shreemani 20 Feb, 2008
Tristan Bethe 20 Feb, 2008
thanks for the article
kab 20 Feb, 2008
Dave 22 Feb, 2008
cssglobe 22 Feb, 2008
kab 24 Feb, 2008
Services Group 25 Feb, 2008
Tom 26 Feb, 2008
Anyway I prefer the single image solution, rather than the gallery.
Pablo 27 Feb, 2008
Thanks
varmisin yokmusun 28 Feb, 2008
is ilanlari 28 Feb, 2008
adriana mullen 29 Feb, 2008
Lewis David 7 Mar, 2008
Simon James 8 Mar, 2008
Forumistan 14 Mar, 2008
polarizer 19 Mar, 2008
the polarizer
Mike 21 Mar, 2008
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 25 Mar, 2008
thankyou for sharing this great css trick
Val 10 Apr, 2008
AG 16 Apr, 2008
AG 16 Apr, 2008
.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 19 Apr, 2008
kuaför malzemeleri 7 May, 2008
thanks for the demo and example code also.
Sim Kamsan 20 May, 2008
herzausgold 21 May, 2008
b 21 May, 2008
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 27 May, 2008
Don 5 Jun, 2008
Pepe 12 Jun, 2008
I used it in the Gallery of my Bandpage.
Keep going.
Astyan Tanks Bitter 14 Jun, 2008
Original use of the overflow property.
Thanks for the article.
josterr 19 Jun, 2008
Ionut Bucur 25 Jun, 2008
Zim 8 Jul, 2008
Oyun 9 Jul, 2008
Michael Study 9 Jul, 2008
utility warehouse 21 Jul, 2008
toner 12 Aug, 2008
Otel 4 Sep, 2008
Dominic Turner, Bristol 12 Nov, 2008
<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>
Estetik 16 Nov, 2008
Estetik 25 Nov, 2008
film izle 28 Nov, 2008
chat 6 Dec, 2008
savaş oyunu 27 Dec, 2008
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 31 Dec, 2008
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 3 Jan, 2009
Luciano Santa Brígida 5 Jan, 2009
.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 27 Jan, 2009
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 27 Jan, 2009
Rik Weber 5 Feb, 2009
GazTruman 9 Feb, 2009
Made a few changes to the code to suit my design, excellent work! Bookmarked for sure!
Seo 2 Mar, 2009
haberler 2 Mar, 2009
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 2 Mar, 2009
şişme park 2 Mar, 2009
alex 6 Mar, 2009
Matt 16 Mar, 2009
Hosting 18 Mar, 2009
thanks
chat 19 Mar, 2009
burun estetigi 26 Mar, 2009
craig 29 Mar, 2009
Az 13 Apr, 2009
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 29 Apr, 2009
Clark Smith 29 May, 2009
suvish 3 Jun, 2009
sohbet chat 21 Jun, 2009