Create Resizing Thumbnails With Overflow Property

Bookmark on del.icio.us

Create Resizing Thumbnails With Overflow Property

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.

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.

DEMO

Resizing Thumbnails Using Overflow Property

Thumbnail List

Single Thumbnail

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec pede. Vivamus euismod, odio eu sagittis tempor, ligula felis congue nunc, sit amet imperdiet mi nulla sed quam. In pulvinar bibendum urna. Nulla massa. Proin vulputate ornare risus. Nunc vel augue. Quisque vel magna. Cras tristique dignissim libero. Curabitur sagittis nibh eget arcu euismod blandit. Phasellus rhoncus. Proin congue risus sed dui.
Mauris non metus. Donec sem ligula, feugiat a, porta quis, sagittis ut, elit. Nulla pellentesque justo. Morbi feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eros lorem, dapibus eget, varius in, hendrerit id, tortor. Fusce gravida arcu non lorem. Suspendisse nibh. Morbi et arcu. Vestibulum sodales interdum massa.

« back to the article

Resizing thumbnails are brought to you by Css Globe

HTML CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create Resizing Thumbnails With Overflow Property at PHPAsKS.com</title>
<meta name="description" content="Create Resizing Thumbnails With Overflow Property">
</meta>
<style>
/* general */
body {
margin:0;
padding:40px 80px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1, h2{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
font-size:140%;
}
p{
margin:1em 0;
}
p.text{
width:500px;
}
a{
color:#f20;
text-decoration:none;
}
a:hover{
color:#999;
}
img{
border:none;
}
/* // general */
/* thumbnail list */
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left;
margin-right:5px;
border:1px solid #999;
padding:2px;
}
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;
}
/* mouse over */
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* clearing floats */
ul#thumbs:after, li#thumbs:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul#thumbs, li#thumbs{
display:block;
}
/*  \*/
ul#thumbs, li#thumbs{
min-height:1%;
}
* html ul#thumbs, * html li#thumbs{
height:1%;
}
/* // clearing floats */
/* // thumbnail list */
/* single thumbnail */
p.thumb{
float:left;
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
p.thumb a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
p.thumb a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* mouse over */
p.thumb a:hover{
overflow:visible;
z-index:1000;
border:none;
}
p.thumb a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* // single thumbnail */
</style>
</head>
<body>
<h1>Resizing Thumbnails Using Overflow Property</h1>
<h2>Thumbnail List</h2>
<ul id="thumbs">
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/image.jpg" /></a></li>
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/image.jpg" /></a></li>
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/image.jpg" /></a></li>
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/image.jpg" /></a></li>
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/image.jpg" /></a></li>
</ul>
<h2>Single Thumbnail</h2>
<p class="thumb"><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="http://www.phpasks.com/blogs/wp-content/uploads/2009/11/image.jpg" /></a></p>
<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec pede. Vivamus euismod, odio eu sagittis tempor, ligula felis congue nunc, sit amet imperdiet mi nulla sed quam. In pulvinar bibendum urna. Nulla massa. Proin vulputate ornare risus. Nunc vel augue. Quisque vel magna. Cras tristique dignissim libero. Curabitur sagittis nibh eget arcu euismod blandit. Phasellus rhoncus. Proin congue risus sed dui.<br />
Mauris non metus. Donec sem ligula, feugiat a, porta quis, sagittis ut, elit. Nulla pellentesque justo. Morbi feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eros lorem, dapibus eget, varius in, hendrerit id, tortor. Fusce gravida arcu non lorem. Suspendisse nibh. Morbi et arcu. Vestibulum sodales interdum massa. </p>
<p><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/" title="read more about this trick">&laquo; back to the article</a></p>
<p>Resizing thumbnails are brought to you by <a href="http://phpasks.com" title="web standards magazine and css news">Css Globe</a></p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create Resizing Thumbnails With Overflow Property at PHPAsKS.com</title>
<meta name="description" content="Create Resizing Thumbnails With Overflow Property">
</meta>
<style>
/* general */
body {
margin:0;
padding:40px 80px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1, h2{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
font-size:140%;
}
p{
margin:1em 0;
}
p.text{
width:500px;
}
a{
color:#f20;
text-decoration:none;
}
a:hover{
color:#999;
}
img{
border:none;
}
/* // general */
/* thumbnail list */
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
float:left;
margin-right:5px;
border:1px solid #999;
padding:2px;
}
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;
}
/* mouse over */
ul#thumbs a:hover{
overflow:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* clearing floats */
ul#thumbs:after, li#thumbs:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul#thumbs, li#thumbs{
display:block;
}
/*  \*/
ul#thumbs, li#thumbs{
min-height:1%;
}
* html ul#thumbs, * html li#thumbs{
height:1%;
}

/* // clearing floats */
/* // thumbnail list */
/* single thumbnail */
p.thumb{
float:left;
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
p.thumb a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
p.thumb a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* mouse over */
p.thumb a:hover{
overflow:visible;
z-index:1000;
border:none;
}
p.thumb a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* // single thumbnail */
</style>
</head>
<body>
<h1>Resizing Thumbnails Using Overflow Property</h1>
<h2>Thumbnail List</h2>
<ul id="thumbs">
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="image.jpg" /></a></li>
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="image.jpg" /></a></li>
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="image.jpg" /></a></li>
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="image.jpg" /></a></li>
<li><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="image.jpg" /></a></li>
</ul>
<h2>Single Thumbnail</h2>
<p class="thumb"><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/"><img src="image.jpg" /></a></p>
<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec pede. Vivamus euismod, odio eu sagittis tempor, ligula felis congue nunc, sit amet imperdiet mi nulla sed quam. In pulvinar bibendum urna. Nulla massa. Proin vulputate ornare risus. Nunc vel augue. Quisque vel magna. Cras tristique dignissim libero. Curabitur sagittis nibh eget arcu euismod blandit. Phasellus rhoncus. Proin congue risus sed dui.<br />
Mauris non metus. Donec sem ligula, feugiat a, porta quis, sagittis ut, elit. Nulla pellentesque justo. Morbi feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eros lorem, dapibus eget, varius in, hendrerit id, tortor. Fusce gravida arcu non lorem. Suspendisse nibh. Morbi et arcu. Vestibulum sodales interdum massa. </p>
<p><a href="http://www.phpasks.com/blogs/create-resizing-thumbnails-with-overflow-property/" title="read more about this trick">&laquo; back to the article</a></p>
<p>Resizing thumbnails are brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a></p>
</body>
</html>

2009
11/06
CATEGORY
HTML
image hover
image popup
Javascript
TAGS





1 comment

  1. No comments yet.

  1. No trackbacks yet.