image rendering blur when scaling.
Hello, could anybody give me a tip on how to avoid image blurring when it scaled up, So I have my image in a container, and I put transform: scale (103%) when hovered to the container, the image has width and height 100%, so it fills up the container when I hover over it and the container the images scale up, but it blurs during the transition, and I have .6s ease-in and out aswell, I tried to upload code pen but keeps giving error trying to host image. Thank you.
.container--scale-1{
padding: 5em 5em;
position: relative;
z-index: 100;
overflow: hidden;
width: 19em;
height: 13em;
background-color: black;
border: 2px solid none;
transition: .6s ease-in-out;
}
.container--scale-1:hover{
transform: scale(103%);
}
.container--scale-1 img{
width: 100%;
height: 100%;
z-index: -150;
position: absolute;
object-fit: cover;
top: 0;
left: 0;
background-position: center;
opacity: 80%;
}
5 Replies
you can't
don't scale up
do something like changing opacity
you can try to use
will-change: transform, scale; but it will always look like shityeah Ill just do another transition. thanks.
you're welcome
i saw it, and yes, i am familiar with javascript
but if it is a question, it's better that you make a new post
ok thank you. i did think of that to be fair and not use all your time, that why I deleted it and make a new post. thanks.
oh, it's not about being my time, but about being the rules
it makes sense, as if someone else reads this and has an idea on how to solve this, that person can answer here
and each topic is on it's own channel