• 회원가입
  • 로그인
  • 구글아이디로 로그인

[image] CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우스오버효과)

목차

  1. 이미지 마우스오버 Fade - 텍스트 띄우기
  2. 이미지 마우스오버 Fade - 버튼 띄우기
  3. 이미지 마우스오버 Slide - Top
  4. 이미지 마우스오버 Slide - Bottom
  5. 이미지 마우스오버 Slide - Right
  6. 이미지 마우스오버 Slide - Left
  7. 이미지 마우스오버 Zoom
  8. 이미지 마우스오버 Title
  9. 이미지 마우스오버 Icon
  10. 이미지 마우스오버 효과 모두 보기 ★

 

이미지 마우스오버 Fade - 텍스트 띄우기

 

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.container {

  position: relative;

  width: 50%;

}


.image {

  display: block;

  width: 100%;

  height: auto;

}


.textbox{

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 100%;

  width: 100%;

  opacity: 0;

  transition: .5s ease;

  background-color: rgb(0,140,186);

}


.container:hover .textbox{

  opacity: 0.7;

}


.text {

  color: white;

  font-size: 25px;

  font-family:verdana, sans-serif;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  text-align: center;

}

</style>


<div class="container">

  <img src="https://picsum.photos/498" alt="Picsum" class="image">

  <div class="textbox">

    <div class="text">홈짱닷컴 Homzzang.com</div>

  </div>

</div>


결과보기

 

이미지 마우스오버 Fade - 버튼 띄우기

 

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.container {

  position: relative;

  width: 50%;

}


.image {

  opacity: 1;

  display: block;

  width: 100%;

  height: auto;

  transition: .5s ease;

  backface-visibility: hidden;

}


.textbox {

  transition: .5s ease;

  opacity: 0;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  text-align: center;

}


.container:hover .image {

  opacity: 0.3;

}


.container:hover .textbox {

  opacity: 0.5;

}


.text {

  background-color: rgb(0,140,186);

  color: white;

  font-size: 16px;

  padding:16px 32px;

}

</style>


<div class="container">

  <img src="https://picsum.photos/498" alt="Picsum" class="image" style="width:100%">

  <div class="textbox">

    <div class="text">홈짱닷컴 Homzzang.com</div>

  </div>

</div>


결과보기

 

이미지 마우스오버 Slide - Top

이미지 마우스오버 Slide - Bottom

이미지 마우스오버 Slide - Right

이미지 마우스오버 Slide - Left

이미지 마우스오버 Zoom

이미지 마우스오버 Title

이미지 마우스오버 Icon

 

이미지 마우스오버 효과 모두 보기 ★

 
샘플

https://tympanus.net/Development/HoverEffectIdeas/index.html

https://tympanus.net/Development/HoverEffectIdeas/index2.html

 

다운로드

https://tympanus.net/Development/HoverEffectIdeas/HoverEffectIdeas.zip

 

설명 매뉴얼

https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012