이미지에 마우스 올렸을 때 확대하는 방법
width="722"
height="378"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvxs8KNbxCiGqA6WFW73BaJyi9cMDC49iTK8H5bZmGp1Uhtp9pmhNiLwN5PO2JbAORA4V8sNWwmbDb3CcOMHvXkzP6Dqo_cbyZxEucF9Itv09wwOwl0frhuCpcvE-UZseJthpmcoiWC4/s0/Zoom-Image-Hover-02.gif"
/>
이미지에 마우스 올렸을 때 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다.
<h1>Hover Effect</h1>
<div class="a">
<img alt="" src="sample.jpg">
</div>h1 {
text-align: center;
}
img {
max-width: 100%;
}
.a {
width: 400px;
margin: 0px auto;
}결과는 다음과 같습니다.
alt="마우스 올렸을 때 이미지를 확대하기 위한 간단한 예시"
width="718"
height="394"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2pxxC5cDbPLXO98D_m-SOEL1bkMDsw_ZwZSis8LnyDJP5gw1MMN3943jkijkQe6yOmZhgxnaQ35U6gMOrtC28vWXnk9tFJB3YYgbESdd4kJxPVoDxwFjxANkb2POrNQUbAQJuyYzB9UE/s0/Zoom-Image-Hover.png"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2pxxC5cDbPLXO98D_m-SOEL1bkMDsw_ZwZSis8LnyDJP5gw1MMN3943jkijkQe6yOmZhgxnaQ35U6gMOrtC28vWXnk9tFJB3YYgbESdd4kJxPVoDxwFjxANkb2POrNQUbAQJuyYzB9UE/s0/Zoom-Image-Hover.png"
/>
여기에 마우스를 올렸을 때 이미지가 확대되도록
>transform >
속성을 추가합니다.
>transition >
속성은 부드럽게 커지게 하기 위해 넣은 것입니다.
.a img {
transition: all 0.2s linear;
}
.a:hover img {
transform: scale( 1.4 );
}class="lazy"
width="722"
height="416"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg137I_k-5QlhNmHEf9RWKALW_mXBxeZ_3ZeRnghsO1ZtNRFaFnHy4QyPnffX6KqEQfA07ukVEWwPIXJ-0XDXpH26qtiXj3BtlYQ6ulc4X5xx0DM0CubqFDpp-6NXxxOrLf6R6SO6wKnAY/s0/Zoom-Image-Hover-01.gif"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
이미지가 확대되지만 전체 크기는 변하지 않게 하고 싶다면
overflow: hidden을 추가합니다.
.a {
width: 400px;
margin: 0px auto;
overflow: hidden;
}alt="이미지 크기 고정하고 확대 효과주기"
width="722"
height="378"
data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFvxs8KNbxCiGqA6WFW73BaJyi9cMDC49iTK8H5bZmGp1Uhtp9pmhNiLwN5PO2JbAORA4V8sNWwmbDb3CcOMHvXkzP6Dqo_cbyZxEucF9Itv09wwOwl0frhuCpcvE-UZseJthpmcoiWC4/s0/Zoom-Image-Hover-02.gif"
src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>