- This topic is empty.
-
AuthorPosts
-
April 6, 2011 at 5:32 pm #32261chrisuptonMember
I am having an issue. On my image hover the transform is blurring the image pretty bad. Can someone help me figure out why its blurring?
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;
}April 6, 2011 at 7:09 pm #51956mikelegacyMemberWhat 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 100×100 and the size of the linked image is ALSO 100×100, when you hover and it makes the image 120×120 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 100×100 and after the hover it’s 120×120, then upload an image file that is 120×120 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.
April 6, 2011 at 7:13 pm #51957mikelegacyMemberYou 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.
April 6, 2011 at 7:31 pm #51949Historical Forums UserParticipantHey 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.
I’ve used this here;
http://meetaaronsilber.com/experiments/css3imgpop/index.html
April 6, 2011 at 8:56 pm #51915mikelegacyMemberThat’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
April 7, 2011 at 8:47 pm #51880chrisuptonMemberOk, thanks for all of the input. Heres what I did to fix it.
I basically put the transform on the container as well as the image. This worked. Kinda not completely sure why.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.