This is for a photo gallery, not a nav or anything. What’s the best way to show a slightly larger image (just by a few pixels) on hover? Doing this is easy enough, but it makes the image a little blury. I swear I’ve seen it done where the images don’t become blury, I just can’t find it now. Below are the three ways that I know of to accomplish this. But, is there another, possibly better way that I don’t know of to keep the images from becoming blury when they slightly grow when hovered over?
give the image a class and simply make it larger on hover.
show another slightly larger thumbnail image on hover (not very practicle though).
put the image in a container and limit the containers size until hovered over. But will display:inline-block work cross browser on the <li> for this one. Because the thumbs need to be inline (five or so to a line). Or should I limit the <a> size somehow? Thanks!
Oops, I forgot about that one, the one you just described. Four ways then! Ya, I did try it that way also but then it made all the thumbs look “not so good”. Not blury, but a little “choppy” would be the best word for it I guess. But your right, then the hovered image looked good. But the rest (the whole lot of them) did not until hovered over.
When I saw this done a few weeks ago, it looked like the exact same quality image on both of them. And it grew by about 10px in all directions. Thats to much for my taste. I only need a subtle hover - like 3 or 4 px larger on hover. But it’s still enough to bring on the blur.
As far as I know the only way to accomplish this is to limit the size of the images container. But that’s getting a bit tricky as both the thumbnail and the larger image (the “real” one - the one that grows 10 times the size) are all sitting in the same container. I’m guessing it can probably be done with the <li> or something. I just haven’t tested that route yet.
I really don’t know how I could of been any clearer - but here it is again. I have a thumbnail image. It’s size is 75px by 105px. When this image is hovered over I would like this thumbnail image to grow to be 78px by 108px and not become blury.
Note: also when this same thumbnail is hovered over a large image ten times the size of the thumb will display. I have this part covered in full. In fact, I have it all covered in full (and then some) except finding a way to prevent the thumbnail from becoming a little blurry when enlarged (by 3px).
I dont know of any instances where a browser can scale or resize an image, just have 2 images 1 small, 1 large, and combine them into 1 image stacked on top of eachother, then use css rollovers with background position top/bottom to switch between them.
Hovering over the image thumb and the image re-size’s to those dimensions and at the same time another element is positioned elsewhere which is the largest image.
For optimize minimize the thumb image hover-difference the original size could be inbetween the two set sizes. But I think the thumb image can blur unnoticed when growing on hover, the eye would instead notice the big image change. Therefor; unhovered the size rather be the original image size.
My test example (using geometric figures it is obviously IE is worst resizing images):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
li{
display:inline;
}
a:hover{ /* fake-change on a:hover for IE6 to handle child on hover */
visibility:visible;
}
a img{ /* original image size coulld be 76x106 but rather be 75x105 */
border:0 none;
width:105px;
height:75px;
background: #999; /* just to fake an image */
}
a:hover img{
margin:-1px -2px -2px -1px;
width:108px;
height:78px;
}
</style></head><body>
<ul id="gallery">
<li><a href="#nogo"><img src="images/thumb75x105.jpg" alt="75x105"></a></li>
<li><a href="#nogo"><img src="images/thumb76x106.jpg" alt="76x106"></a></li>
<li><a href="#nogo"><img src="images/thumb77x107.jpg" alt="77x107"></a></li>
<li><a href="#nogo"><img src="images/thumb77x107.jpg" alt="78x108"></a></li>
</ul>
</body></html>
I dont know of any instances where a browser can scale or resize an image,
If you dynamically resize only one aspect of the image e.g. (it’s width only) then the browser will automatically resize the height to maintain the correct aspect ratio.
If you look at the image in this example and open and close the window you will see how it resizes correctly because only the width has been set (in percentage).
To do this for a hover effect you would resize its width only and the height would be calculated by the browser to match the correct aspect ratio.
The image still won’t be as clean as resizing in photoshop of course as browsers only handle this task basically. Some images work a lot better than others depending on what they portray.
I have a thumbnail image. It’s size is 75px by 105px. When this image is hovered over I would like this thumbnail image to grow to be 78px by 108px and not become blury.
Yes, I was suggesting that he didn’t do that because it’s not a good idea lol
If the original image size was 75px x 105px then just resizing the width to 78px would make the height increase automatically but at the correct aspect which won’t be exactly 108px. If you want to resize images exactly then its probably better to do it in reverse where the smaller image is the one that is resized smaller and the larger one becomes the correct sized image.
Ahhh I see, only declaring a larger width on hover does make the image look much better. But then, at least in my example, all the browsers chuck-a-wobbly on the last thumbnail. Which made me realize that I’m stupid. No wonder it was blurring, making it 3px larger on 75px is a greater percentage increase than 3px on 105px.
I probably need pixel perfection. So if I just declare a larger width, then I’ll mess with the padding and borders on hover untill I get it right. Or if that doesn’t work, I’ll just increase the height by 2px and then increase the width by 3px or something. One of those will fix the blur. So thanks guys for showing me the light. I can see now!
