[CSS] 마우스 hover시 이미지 확대하기 (크기 고정)

728x90

마우스를 이미지에 갖다 대었을 때 이미지가 확대되어 보이게 하는 법

(이미지를 확대하지만 전체 크기는 고정시킴)

이미지 확대하기 (크기 고정)

overflow:hidden 옵션을 .fix 스타일에 추가한다.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>마우스 hover시 이미지 확대하기(크기고정)</title>
    <link rel="stylesheet" href="./test.css" />
  </head>
  <body>
    <h1>Hover 이미지 확대하기</h1>
    <div class="fix">
      <img src="./images/또리봄.png" alt="또리봄" />
    </div>
  </body>
</html>

css

h1 {
  color: yellow;
  background-color: lightgray;
  font-size: 18px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

img {
  max-width: 100%;
  transition: all 0.3s linear;
}
.fix {
  width: 200px;
  margin: 0px auto;
  overflow: hidden;
}
.fix:hover img {
  transform: scale(1.4);
}

.fix 스타일의 width 200px 안에서 이미지가 확대된다.

transition 속성을 추가하여 이미지가 부드럽게 커지는 모습을 연출.

transform: scale(1.4) : 이미지가 얼마나 확대 될지 정의.

728x90

'HTML&CSS' 카테고리의 다른 글

[HTML] a 태그 target 속성 (0)	2023.07.29
[HTML] dataset data속성 사용하기 (0)	2023.07.28
[HTML] GNB, LNB, FNB, SNB 네비게이션 영역별 용어 정리 (0)	2023.07.26
[HTML] meta 태그로 웹 사이트 검색되게 하는 방법 (0)	2023.07.23
[CSS] text에 outline 테두리 넣기 -webkit-text-stroke (0)	2023.07.22