본문 바로가기 메뉴 바로가기

친절한김씨의 공작소

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

친절한김씨의 공작소

검색하기 폼
  • 분류 전체보기 (26)
    • 공지 (0)
    • 사각사각 (17)
      • 포토샵 (0)
      • html & css (5)
      • Blender (3)
      • TISTORY (1)
      • 카페24 (7)
      • 심즈4 스튜디오 (1)
      • 디자인 TIP (0)
    • 뚝딱뚝딱 (7)
      • 심즈4_CC템배포 (7)
      • 아날로그 (0)
      • 디지털 (0)
    • 우당탕탕 (2)
      • 일상 (0)
      • 게임 (0)
      • 리뷰 (2)
  • 방명록

백그라운드이미지 (1)
[html&css] 마우스 오버시 서서히 투명하게 변하는 배경 이미지 background hover transition

hover효과이기 때문에 모든 스타일 속성(서서히 나타났다 서서히 사라지는 속성)을 hover에 주면 된다고 생각했었습니다. 하지만 마우스가 빠졌을 때에도 부드럽게 사라지도록 만들기 위해서는 기본적인 상태에도 트랜지션을 줘야 한다는 것을 알았습니다. 만약 기본적인 상태의 div에 트랜지션을 주지 않았다면, hover시 서서히 변했을 테지만 마우스를 이미지에서 빼면 갑자기 원래 배경 이미지로 확 변하는 것을 볼 수 있을 겁니다. 이것은 멋도 없고 오래된 방식으로 보기 좋지 않겠지요. See the Pen hover alpha by kindkimyoung (@kindkimyoung) on CodePen. 주석에도 적었지만, div class를 여러개 만들기 싫어서 div에 인라인 스타일로 직접 배경 이미지를..

사각사각/html & css 2020. 6. 23. 15:38
이전 1 다음
이전 다음
공지사항

Blog is powered by Tistory / Designed by Tistory

티스토리툴바