Hi,
I’ve made simple section with 3 images in grid. Then I make transform with scale to make it a little bit bigger after hover over it. I set outline as well.
Everything is fine but I can see little ‘sharpness’ fix at the end of the animation. It looks like image try to fit between outline boreder about 2-3px and gets more sharpness as well.
Images are not so big, cause they are (3) between 600-1000px width and 600-700 height. I tried:
resize them to the same size > doesn’t work
overflow: hidden; > doesn’t work
remove outline > doesn’t work
img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
box-shadow: -1rem 1rem 2rem;
margin-top: 2rem;
transition: all .2s;
overflow: hidden;
z-index: 10;
&:hover{
transform: scale(1.2);
box-shadow: -1.5rem 1.5rem 3rem;
z-index: 20;
outline: .4rem solid $ind;
}
}