What are the native size of the images that are being hovered over? If they ARE NOT bigger than the hover state, then they are going to blur.
For instance, if you image in it's normal thumbnail state is 100x100 and the size of the linked image is ALSO 100x100, when you hover and it makes the image 120x120 or whatever, there DEFINITELY will be blurring.
All i'm trying to say is make the size of the image that is being linked the size of the image AFTER it is being hovered over.
For example: If your image when in normal state is 100x100 and after the hover it's 120x120, then upload an image file that is 120x120 and just use the HMTL to resize the original image.
You probably already know this since it's so simple, but I just thought I'd go over it in case you made this mistake and you're face-palming right now.
You know what, using that CSS code there, you're probably always going to get blur. Since you are taking the image's original size, and multiplying that by 1.3, you are actually stretching the image and losing pixels.
My only suggestion would be to use the old onMouseover JS rollover effects. However, I'm not an expert on Javascript coding.
Hey guys - I just experienced this riddle. In your example, you'll need to transform img DOWN something like "transform: scale(0.7)" and then scale UP to the images native dimensions on hover like "transform: scale(1.0)"
The scale value is relative to the original image's dimensions - not their current dimensions on screen so a scale of 1 always equals the original image's dimensions.
That's a good idea. Too bad im too much of an "inside the box" thinker. I knew that upsizing to 1.3 would always make the image blurry, but it never occurred to me that he should just size DOWN for the original state.
Thanks for being an "outside the box" thinker! haha
just one more thing, as aaron states, a scale of 1 equals the original image's dimensions as computed by the browser given the specified size and not necessarily the intrinsic dimensions (as is the case here).
In chris' page the images are actually larger than the scaled up size, but are scaled after the browser renders the new size (by setting width and height).
Here is the site:
http://www.twopopes.com/reels/view/reel/8
Here is my CSS:
.thumb img {
width: 87px;
height: 49px;
border: 1px solid #333;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
transition:all .3s ease;
position: relative;
top: 14px;
z-index: 10;
}
.thumb img:hover {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
z-index: 1000;
position: relative;
border: 1px solid #fff;
}
For instance, if you image in it's normal thumbnail state is 100x100 and the size of the linked image is ALSO 100x100, when you hover and it makes the image 120x120 or whatever, there DEFINITELY will be blurring.
All i'm trying to say is make the size of the image that is being linked the size of the image AFTER it is being hovered over.
For example: If your image when in normal state is 100x100 and after the hover it's 120x120, then upload an image file that is 120x120 and just use the HMTL to resize the original image.
You probably already know this since it's so simple, but I just thought I'd go over it in case you made this mistake and you're face-palming right now.
My only suggestion would be to use the old onMouseover JS rollover effects. However, I'm not an expert on Javascript coding.
The scale value is relative to the original image's dimensions - not their current dimensions on screen so a scale of 1 always equals the original image's dimensions.
I've used this here;
http://meetaaronsilber.com/experiments/css3imgpop/index.html
Thanks for being an "outside the box" thinker! haha
In chris' page the images are actually larger than the scaled up size, but are scaled after the browser renders the new size (by setting width and height).
I basically put the transform on the container as well as the image. This worked. Kinda not completely sure why.