Dynamic Drive CSS Library- CSS Smart Image Enlarger

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Image CSS: Here

CSS Smart Image Enlarger

Author: Erdinc A

This versatile CSS based image enlarger lets you display image thumbnails that resize to their original dimensions when the mouse rolls over them. Only one image is needed in each case. The CSS code works in a way that negates the need to manually have to specify the dimensions of each enlarged image, saving you a lot of time. A textual description can also be displayed beneath the enlarged image. Cool!

Demo:

Some text can go here.

Here's an additional demo page showing some more advanced set ups using this script.

The CSS: The below code should be added to the HEAD section of your page:

<style type="text/css">

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
	float: left;
	clear: none; /* set to left or right if needed */
	padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
	padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a { 
	display:block;
	text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
 	position:relative;
}

.ienlarger span img {
	border: 1px solid #FFFFFF; /* adds a border around the image */
	margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
	position: absolute;
	display:none;
	color: #FFCC00; /* caption text colour */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; /* caption text size */
	background-color: #000000;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 13px;
	padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span { 
	display:block;
	top: 50px; /* means the pop-up's top is 50px away from thumb's top */
	left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
	z-index: 100;
	
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */	

/* If you want the pop-up open above the thumb, remove the top: 50px; and add  
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */	

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
	width: 150px; /* enter desired thumb width here */
	height : auto;
}

/* smart image enlarger ends here */

</style>

The HTML:

  <div class="ienlarger"><a href="http://www.dynamicdrive.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="http://www.google.co.uk/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="http://www.facebook.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

	<br style="clear:left" />

Code Info

Rate this code:

Date Posted: 11/12/2009

Revision History: None

Usage Terms: Click here

Your Comments (7)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

this technic i think so useful. thanx

Posted by web tasarımı on 11/23, 04:54 AM

Thanks...Very useful knowledge for me
CaM BalkoN

Posted by CaM BalkoN on 11/25, 02:15 PM

good but big pictures is problem for download. if you make this java, download big picks when the guest on thumb picks. but good job, thanks :)

Posted by web tasarım on 11/26, 04:35 AM

Very good technique, thanks for sharing, really good save of time and look professional.

Posted by Paarth on 11/27, 09:20 AM

HEY, IM GUILLIANO THANK YOU VERY MUCH FOR ALL THE EXAMPLE.
aND IM LOOKING FOR A HUGE FAVOUR
i WANT TO KNOW HOW TO CREAT MY OWN BACKGROUD PAGE USING JAVA OR ANOTHER METHOUD OF CODE.
CAN YOU PLEASE SHOW ME HOW TO DO IT IF ITS POSSIBLE PLEASE..
IF YOU KNOW SEND ME A MAIL ON GUILLIANO01@HOTMAIL.COM

Posted by GUILLIANO FRANCOIS on 12/01, 04:14 PM

Thanks for helpful information you catch up us with your instructional explanation.

Posted by izmir web tasarım on 12/06, 02:14 AM

This is really useful one...If you blow up such an image, all you'll be doing is making the pixels bigger, as you have noticed.

Posted by Twitter layouts on 12/10, 05:41 AM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.