[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/