Unnecessary blur effect when scaling an element
I am trying to remove the blur effect that happens while scaling a transition. The image during the transition is passable, but this font transition is so ugly ... Is there a way to fix it? I tried with "translateY (0) translateZ (0)" but no effect at all. When the effect is done, everything returns to normal.
.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>
source to share
In appearance, your image is only 200px by 200px. The hover effect causes the image to stretch, resulting in loss / blurring of quality. You can get a higher quality image, so when it is stretched it does not lose quality for example ... a 210px by 210px image at 72px. OR you can make your circle 190px by 190px and scale it to 200px on hover, which will result in the exact size of your background image. OR just change the width and height on hover. Example:
.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>
Works like butter!
source to share