Tutorial
Click on thumbnailed images to enlarge
By less than popular request, a pleasant way of adding a thumbnail to larger previewer to a Myspace profile, website, or anywhere that allows HTML & CSS.
Browser support:
- Firefox
- Chrome
- Safari
- Opera
- IE8+
- IE7 (limited)
This does get a bit confusing sometimes, so do read carefully. The idea is to create hover previews: a user hovers over a small thumbnail, and the larger image appears below a gallery of thumbnails, like below. (Live preview here: http://tinyurl.com/yc4d4mk)
To start, we'll put all of the small images in a single div, and each individual image will be in its own div. The larger div will be much taller than the the thumbed images, so make sure you don't need to put anything directly under them (basically, just give yourself some breathing room). I'll use images from stock.xchng.
The <span></span> tags after each thumbed image is where the larger image will be shown. When hovered, they'll be placed underneath all the images at the bottom center.
Now for the CSS (which goes between your <style></style> tags):
The only parts of this you'll need to change are the dimensions. Let's start with the "hover" div, which I've given a width of 1000 pixels and a height of 446 pixels. The thumbed images are 200 pixels wide, and there are five thumbed images. 5 x 200 = 1000 (welcome to 1st grade!). The height of the thumbed images is 146 pixels, and the height of the full-sized images is 300 pixels. 146 + 300 = 446. Adjust the height and width according to the dimensions of your thumbed and full-sized images.
- .hover div { } - This defines the containers for the individual images. The dimensions should be the height and width of your thumbed images.
- .hover a img { } - This is for the thumbed images themselves. ".hover a img { }" is really an option property; I used it because I'm using the full-sized images for my thumbs, and setting the dimensions will simply resize them.
- .hover a:hover span - These are definitions for the full-sized image. The full images are shown by adding a background to the tags we put in the HTML, and we want them in the center. Because span tags are inline elements, we need to set them to display:block;. Change the height:300px; to the height of your full-sized images.
Next, let's add the full-sized images (backgrounds), and adjust their positioning.
The first span tag needs to be the full width of the parent div (".hover") because it's on the left side. The next one has a bit more involvement.
- left:-200px; - This should be the width of the first thumbed image.
- padding:0 0 0 200px; - Next, we need to add left padding to it, which should be the same amount that you moved the tag to the left.
- width:800px; - This should be the width of the "hover" div, minus the amount of padding you added.
The same is applied to the next images. For each one, move it left the total width of each image to the left of it. For example, if the first image was 200 pixels wide, the second one was 150 pixels wide, and the third image was 300 pixels wide, we would need to move the fourth image left -650 pixels (200 + 150 + 300) and add 650 pixels of left padding.
Remember, if you add any margins between your images, the height and width of your "hover" div should reflect that. In this example, if we added a 5px margin between each image, the width of the "hover" div would be 1025px (1000 + 5 x 5). Add a 10 pixel margin to the top of the larger image would give the "hover" div a width of 456px (146 + 300 + 10).
A note on compatability: this will not work on Internet Explorer 6 and earlier. It has limited support in IE7 because IE7 will likely add horizontal scroll bars to your page (depending on the width of your "hover" div). There shouldn't be any problems in IE8+ and other standards-compliant browsers.
Browser support:
- Firefox
- Chrome
- Safari
- Opera
- IE8+
- IE7 (limited)
This does get a bit confusing sometimes, so do read carefully. The idea is to create hover previews: a user hovers over a small thumbnail, and the larger image appears below a gallery of thumbnails, like below. (Live preview here: http://tinyurl.com/yc4d4mk)
To start, we'll put all of the small images in a single div, and each individual image will be in its own div. The larger div will be much taller than the the thumbed images, so make sure you don't need to put anything directly under them (basically, just give yourself some breathing room). I'll use images from stock.xchng.
<div class="hover">
<div>
<a href="#" class="hover-1">
<img src="http://www.sxc.hu/img/crt_surely.jpg" alt="" /><span></span></a>
</div>
<div>
<a href="#" class="hover-2">
<img src="http://www.sxc.hu/img/crt_luriete.jpg" alt="" /><span></span></a>
</div>
<div>
<a href="#" class="hover-3">
<img src="http://www.sxc.hu/img/crt_emmapayne.jpg" alt="" /><span></span></a>
</div>
<div>
<a href="#" class="hover-4">
<img src="http://www.sxc.hu/img/crt_Subliminl.jpg" alt="" /><span></span></a>
</div>
<div>
<a href="#" class="hover-5">
<img src="http://www.sxc.hu/img/crt_mexikids.jpg" alt="" /><span></span></a>
</div>
</div>
<div>
<a href="#" class="hover-1">
<img src="http://www.sxc.hu/img/crt_surely.jpg" alt="" /><span></span></a>
</div>
<div>
<a href="#" class="hover-2">
<img src="http://www.sxc.hu/img/crt_luriete.jpg" alt="" /><span></span></a>
</div>
<div>
<a href="#" class="hover-3">
<img src="http://www.sxc.hu/img/crt_emmapayne.jpg" alt="" /><span></span></a>
</div>
<div>
<a href="#" class="hover-4">
<img src="http://www.sxc.hu/img/crt_Subliminl.jpg" alt="" /><span></span></a>
</div>
<div>
<a href="#" class="hover-5">
<img src="http://www.sxc.hu/img/crt_mexikids.jpg" alt="" /><span></span></a>
</div>
</div>
The <span></span> tags after each thumbed image is where the larger image will be shown. When hovered, they'll be placed underneath all the images at the bottom center.
Now for the CSS (which goes between your <style></style> tags):
.hover { height:446px; width:1000px; }
.hover div { float:left; overflow:visible; height:146px; width:200px; }
.hover a { display:block; }
.hover a img { height:146px; width:200px; }
.hover a:hover span { background-position:center; background-repeat:no-repeat; display:block; position:relative; height:300px; }
.hover div { float:left; overflow:visible; height:146px; width:200px; }
.hover a { display:block; }
.hover a img { height:146px; width:200px; }
.hover a:hover span { background-position:center; background-repeat:no-repeat; display:block; position:relative; height:300px; }
The only parts of this you'll need to change are the dimensions. Let's start with the "hover" div, which I've given a width of 1000 pixels and a height of 446 pixels. The thumbed images are 200 pixels wide, and there are five thumbed images. 5 x 200 = 1000 (welcome to 1st grade!). The height of the thumbed images is 146 pixels, and the height of the full-sized images is 300 pixels. 146 + 300 = 446. Adjust the height and width according to the dimensions of your thumbed and full-sized images.
- .hover div { } - This defines the containers for the individual images. The dimensions should be the height and width of your thumbed images.
- .hover a img { } - This is for the thumbed images themselves. ".hover a img { }" is really an option property; I used it because I'm using the full-sized images for my thumbs, and setting the dimensions will simply resize them.
- .hover a:hover span - These are definitions for the full-sized image. The full images are shown by adding a background to the tags we put in the HTML, and we want them in the center. Because span tags are inline elements, we need to set them to display:block;. Change the height:300px; to the height of your full-sized images.
Next, let's add the full-sized images (backgrounds), and adjust their positioning.
.hover-1:hover span { background-image:url('http://cbimg6.com/tutorials/09/11/14239ab.jpg'); width:1000px; }
.hover-2:hover span { background-image:url('http://cbimg6.com/tutorials/09/11/14239ac.jpg'); left:-200px; padding:0 0 0 200px; width:800px; }
.hover-3:hover span { background-image:url('http://cbimg6.com/tutorials/09/11/14239ad.jpg'); left:-400px; padding:0 0 0 400px; width:600px; }
.hover-4:hover span { background-image:url('http://cbimg6.com/tutorials/09/11/14239ae.jpg'); left:-600px; padding:0 0 0 600px; width:400px; }
.hover-5:hover span { background-image:url('http://cbimg6.com/tutorials/09/11/14239af.jpg'); left:-800px; padding:0 0 0 800px; width:200px; }
.hover-2:hover span { background-image:url('http://cbimg6.com/tutorials/09/11/14239ac.jpg'); left:-200px; padding:0 0 0 200px; width:800px; }
.hover-3:hover span { background-image:url('http://cbimg6.com/tutorials/09/11/14239ad.jpg'); left:-400px; padding:0 0 0 400px; width:600px; }
.hover-4:hover span { background-image:url('http://cbimg6.com/tutorials/09/11/14239ae.jpg'); left:-600px; padding:0 0 0 600px; width:400px; }
.hover-5:hover span { background-image:url('http://cbimg6.com/tutorials/09/11/14239af.jpg'); left:-800px; padding:0 0 0 800px; width:200px; }
The first span tag needs to be the full width of the parent div (".hover") because it's on the left side. The next one has a bit more involvement.
- left:-200px; - This should be the width of the first thumbed image.
- padding:0 0 0 200px; - Next, we need to add left padding to it, which should be the same amount that you moved the tag to the left.
- width:800px; - This should be the width of the "hover" div, minus the amount of padding you added.
The same is applied to the next images. For each one, move it left the total width of each image to the left of it. For example, if the first image was 200 pixels wide, the second one was 150 pixels wide, and the third image was 300 pixels wide, we would need to move the fourth image left -650 pixels (200 + 150 + 300) and add 650 pixels of left padding.
Remember, if you add any margins between your images, the height and width of your "hover" div should reflect that. In this example, if we added a 5px margin between each image, the width of the "hover" div would be 1025px (1000 + 5 x 5). Add a 10 pixel margin to the top of the larger image would give the "hover" div a width of 456px (146 + 300 + 10).
A note on compatability: this will not work on Internet Explorer 6 and earlier. It has limited support in IE7 because IE7 will likely add horizontal scroll bars to your page (depending on the width of your "hover" div). There shouldn't be any problems in IE8+ and other standards-compliant browsers.
Tutorial Comments
Showing latest 5 of 5 comments
Nice And Good Job ..............>>>>
By mvshost on Jan 18, 2012 1:52 pm
i hope after appling it to my blog i will say awesome bt now thank you coz am new
By samikats on Mar 17, 2011 4:44 pm
Aweesomeee!! Thank you :]
By Shootyewwithmyidiotgun on Oct 27, 2010 8:29 am
Thank u Very Much !!!!
By warrierrakesh on Aug 4, 2010 2:12 pm
Oh wow, thanks!
By ZeT0 on Nov 19, 2009 10:27 pm
