0

I have a circle with the following CSS:

   width: 106px;
    border-radius: 50%;
    color: white;
    height: 106px;
    margin: 0 auto;
    box-shadow: 0px 0px 8.73px 0.27px rgba(0, 0, 0, 0.39);
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    background-image: url(/images/plussign.svg);
    background-position: center center;
    background-size: 30px 30px;
    background-repeat: no-repeat;

    &:hover {
        transform:scale(1.05, 1.05);
    }

When I hover over the circle, it scales by 105%. However, the plus sign inside the circle becomes blurry. Is there a fix for this?

Brown KL
  • 2,283
  • 4
  • 14
  • 18
  • yep, this is a known nuisance, check this: http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome – Aziz Feb 24 '16 at 18:44
  • I reproduced your example and don't see any problem here: https://jsfiddle.net/42k3zmkn/1/ – Raoulito Feb 24 '16 at 19:10

0 Answers0