이미지 hover

상품이나 이미지에 마우스를 올렸을 때 이미지가 확대되는 듯한 효과를 볼 수 있었을 것이다. 그것을 구현해보려고 한다.

html 구조는 쉽다.

<div class="container">
    <img src="이미지.png" alt="">
</div>

이미지를 넣을 수 있는 img태그와 그 태그를 감싸는 container를 하나 만들어주면 끝이다~~

css가 다하는 부분

.container{
            border: 1px solid #ddd;
            width: 15rem;
            height: 15rem;
            overflow: hidden;
        }

img{
            width: inherit;
            height: inherit;
            object-fit: cover;
            transition: 0.2s;
        }

container에 넓이와 높이를 설정해 주고 꼭!!!! overflow: hidden을 해주어야 한다. 그래야 이미지가 hover되었을 때 삐져 나오지 않고 확대되기 때문

width: inherit란 부모요소가 가진 넓이를 그대로 물려받겠다는 뜻이다. object-fit: cover는 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정된다.

이제 이미지에 마우스를 올렸을 때 효과를 줄 :hover를 사용하자

img:hover{
            transform: scale(1.1);
        }

👽나는 알린이미지를 사용하였다.👽