Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Blurry Image on transform: scale

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #32261
    chrisupton
    Member

    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;
    }

    #51956
    mikelegacy
    Member

    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 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.

    #51957
    mikelegacy
    Member

    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.

    #51949

    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.

    I’ve used this here;

    http://meetaaronsilber.com/experiments/css3imgpop/index.html

    #51915
    mikelegacy
    Member

    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

    #51880
    chrisupton
    Member

    Ok, 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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.