CSS만 사용하여 마우스 오버 시 이미지 확대/축소

사이트를 방문하고 이미지를 클릭할 때마다 자동으로 확대되는 것이 마음에 듭니다. 웹사이트를 더욱 생생하게 만드는 필수 웹 디자인 중 하나입니다. 독자가 읽기를 원하는 중요한 정보가 해당 이미지에 있는 경우 특히 중요하므로 텍스트를 쉽게 확대할 수 있습니다. 나는 그것을하기 위해 트릭을 봤고 전부는 아니지만 대부분의 행동에 약간의 자바 스크립트가 포함됩니다.

CSS만으로 인터랙티브한 이미지를 만들 수 있음을 보여드리겠습니다. 따라서 웹 개발 여정을 막 시작했고 아직 Javascript 풀에 발을 담그지 않았다면 제 방법을 쉽게 따를 수 있습니다.

여기에 예가 있습니다. 이미지 위에 마우스를 올려보세요. D.


CSS 파일에서 단 몇 줄만 있으면 이러한 작업을 수행할 수 있습니다.
코드를 하나씩 분석해보자

HTML
이미지를 플렉스 컨테이너로 감쌌습니다. 이미지가 플렉스박스이고 플렉스박스가 삶을 쉽게 만들어주기 때문입니다. 모두들 Flexbox에게 감사를 표합니다! :)

<div class="container">
<img id="Family-Guy" 
src="https://static.stacker.com/s3fs-public/styles/sar_screen_maximum_large/s3/2019-08/Untitled%20design%20-%202019-08-23T235151.866.webp" alt="Family Guy">
</div>

CSS
이제 커서를 이미지 위에 놓았을 때 확대/축소가 적용되기를 원합니다. 따라서 :hover pseudo class 태그에 img를 정의해야 합니다.

그리고 여기서 흥미로운 점은 animation 속성을 :hover pseudo class 에 추가하는 것입니다. 네! CSS animation는 리터럴 정적 속성에 애니메이션을 적용하고 한 CSS 스타일에서 다른 CSS 스타일로 점진적이고 원활하게 전환할 수 있게 하므로 css를 다음 단계로 끌어 올립니다.

다음은 CSS로 먼저 해야 할 일입니다.

body {
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
  margin: 20px;
}

#Family-Guy {
  border-radius: 10px;
  cursor: pointer;  
  width: 300px;
}

#Family-Guy:hover {
  animation-name: on-hover;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}

@keyframes on-hover {
  0% {
    height: auto;
    opacity: 0.7;
  }
 100% {
    width: 600px;
    height: auto;
  }
}

먼저 keyframes 에서 나중에 호출할 애니메이션 이름을 정의합니다. 그런 다음 확대가 적용되는 시간을 초 단위로 정의합니다.

마지막으로 애니메이션 스타일을 적용할 방법을 지정합니다. animation-fill-mode 속성은 애니메이션이 시작되기 전과 애니메이션이 끝난 후에 일어나는 일을 결정합니다. 이것을 생략하면 값은 기본적으로 없음으로 설정됩니다.

물론 이 경우에는 forwards를 사용합니다. 커서가 더 이상 이미지 위에 있지 않을 때까지 이미지가 확대된 상태를 유지하기를 원하기 때문입니다. forwards 를 사용하면 마지막 애니메이션 스타일(keyframes 속성에 정의됨)이 나중에 유지됩니다. 다음은 animation-fill-mode 속성에 대해 가능한 다른 값입니다.
none 이것이 기본값이며 애니메이션 스타일이 적용되지 않습니다.
backwards 전체 스타일이 적용된 후 애니메이션이 키프레임에 설정된 초기 스타일로 돌아갑니다. 따라서 위의 CSS에서 이 값을 적용하면 이미지가 확대/축소된 후 커서가 계속 위에 있더라도 원래 너비로 돌아갑니다.
both 이렇게 하면 애니메이션 시작 전후에 애니메이션 스타일이 적용됩니다.

실제 마법은 실제로 여기에서 keyframes 속성 때문에 발생합니다. 여기에서 적용할 CSS 스타일, 스타일 전환 방법 및 시기를 정의합니다.

지정할 코드는 위에서 사용된 것처럼 백분율로 표시하거나 백분율과 유사한 키워드 from 및 to 와 함께 사용할 수 있습니다. 최고의 브라우저 호환성을 위해서는 퍼센트를 사용하는 것이 좋습니다!

위의 예에서 0%는 이미지의 초기 상태를 나타내며 불투명도를 줄이는 것 외에는 아무 일도 일어나지 않습니다. 화려한 건 없어...

그런 다음 100%에서 너비를 초기 이미지 크기의 두 배인 600px로 정의합니다. 하나의 애니메이션에서 사용하는 키프레임 속성 수에는 제한이 없습니다. 그러나 이것은 당신이 쉽게 이해할 수 있기를 바라는 간단한 예입니다.

그래서, 당신은 간다! 간단하지만 웹사이트를 약간 대화형으로 만들 수 있을 만큼 강력합니다. 도움이 되었기를 바랍니다. 챠오카카오!