Ненужный эффект размытия при масштабировании элемента

Question

Я пытаюсь удалить эффект размытия, который происходит во время масштабирования перехода. Изображение во время перехода проходимо, но этот переход шрифта настолько уродлив ... Есть ли способ его исправить? Я пробовал с "translateY (0) translateZ (0)", но никакого эффекта вообще. Когда эффект сделан, все возвращается к норме.

.circlee 
 
{ 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    /*margin-top: 200px;*/ 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    border: 2px black solid; 
 
    background-image: url(http://lorempixel.com/200/200/); 
 
    transition: all 1s ease-in-out; 
 
} 
 
.circlee:hover 
 
{ 
 
transform: scale(1.15); 
 
}

<div class="circlee">wwww</div> 
 
<div class="circlee">xxxx</div> 
 
<div class="circlee">ssss</div>

Answer 1

От взглядов этого ваше изображение только 200px на 200px. Эффект наведения приводит к растягиванию изображения, что приводит к потере/размыванию качества. Вы можете получить изображение более высокого качества, поэтому, когда оно растягивается, оно не теряет качества для примера ... изображение 210px на 210 пикселей с разрешением 72 пикселя. ИЛИ вы можете сделать свой круг 190px на 190px и масштабировать его до 200px при наведении, что приведет к точному размеру вашего фонового изображения. ИЛИ просто измените ширину и высоту на зависании. Пример:

.circlee 
 
{ 
 
    display: inline-block; 
 
    margin-right: 50px; 
 
    /*margin-top: 200px;*/ 
 
    width: 190px; 
 
    height: 190px; 
 
    border-radius: 50%; 
 
    border: 2px black solid; 
 
    background-image: url(http://lorempixel.com/200/200/); 
 
    background-size:100% 100%; 
 
    transition: all 1s ease-in-out; 
 
} 
 
.circlee:hover 
 
{ 
 
width:200px; 
 
    height: 200px; 
 
}

<div class="circlee">wwww</div> 
 
<div class="circlee">xxxx</div> 
 
<div class="circlee">ssss</div>

работы как масло!