이미지 호버 효과 만들기

최종목표 완성본

• 이미지는 어둡워지며 커지고 view 텍스트가 나오게 만들어보자

  

---

1.이미지 불러오기 및 영역 설정

• 이미지를 불려와 가운데에 놓고 부모 자식 영역을 구분하자

html --!
<div class="box1">
    <div class="imgbox">
        <img src="https://bnx.oa.gg/img/bnx_16fw_visual_01_list.jpg" alt="">
    </div>
</div>

css --!
.box1{
    width: 300px;
    margin: 0 auto;                    // 가운데 정렬
    border:2px solid red;              // 최상위 태그 영역 표시
}
.box1>.imgbox{
    display:block;
    border:2px solid gold;             // 이미지 부모 영역 표시
}
.box1>.imgbox>img{
    display:block;
    width: 100%;
    height:100%;
    border:2px solid green;            // 이미지 영역 표시
}

! 오른쪽 선이 겹쳐 보이는 것은 자식이 부모의 영역을 벗어날 수 없기 때문이다

2. 마우스 호버 시 어둡게하기

• after와 position을 이용해 위치를 잡고 호버 시 투명도를 주자
• transition으로 천천히 어둡게 하자

.box1{
    width: 300px;
    margin: 0 auto;
    border:2px solid red;
}
.box1>.imgbox{
    display:block;
    position:relative;                   // 검은 배경이 이미지 영역을 벗어나지 못하게 하자
    									    이미지의 부모에 묶는걸 꼭 생각하자!
    border:2px solid gold;
}
.box1>.imgbox>img{
    display:block;
    width: 100%;
    height:100%;
    border:2px solid green;
}

/* 이미지 오버 시 어둡게하기 */
.box1>.imgbox::after{                   // after로 위치를 잡고 position으로 위치를 조절해주자
									       after 위치 꼭 잘 잡자 ㅠ
    display:block;
    content:"";
    background-color:rgba(0,0,0,0);
    width: 100%;
    height:100%;
    position:absolute;                  // 검은 배경을 유령화 하자
    top:0;
    left:0;
    transition: background-color 1s;   // 호버 후 돌아갈 때의 지연속도
}
.box1:hover>.imgbox::after{        
    background-color:rgba(0,0,0,0.5);  // a는 투명도다
    transition: background-color 1s;   // 호버 시 지연속도
}

3. 마우스 호버 시 텍스트 나오게 하기

• 3-1. 텍스트는 이미지의 중앙에 위치해야한다

/* view 생성 */
.box1>.imgbox::before{                 // before로 html img 값 앞에 view 추가 후 위치 잡기
    
    content:"VIEW";
    
    top:50%;
    left:50%;
    color : black;
    
    border:1px solid black;
    border-radius: 3px;
    padding:10px;

}

• 3-2. view는 이미지 중앙 제일 위에 위치해야 한다

/* view 위치 잡기 */
.box1>.imgbox::before{
    content:"VIEW";
    position:absolute;                  // view를 유령화 한다
    top:50%;
    left:50%;
    color : white;                      // 글자를 하얀색으로 바꿔준다
    transform: translatex(-50%) translatey(-50%); // x, y축을 이용해 중앙으로 옮긴다
    border:1px solid white;             // 선을 하얀색으로 바꿔준다
    border-radius: 3px;
    padding:10px;
    z-index:1;                          // 제일 위로 옮긴다
}

• 3-3. 호버 시 view가 부드럽게 나타나도록 하자

/* view 효과 주기 */
.box1>.imgbox::before{
    content:"VIEW";
    position:absolute;
    top:50%;
    left:50%;
    color : white;
    transform: translatex(-50%) translatey(-50%);
    border:1px solid white;
    border-radius: 3px;
    padding:10px;
    opacity:0;                         // 호버 전에 안보이게 한다
    transition: opacity 2s;            // 호버 후에도 2초동안 사라지게 한다
    z-index:1;
}

.box1:hover>.imgbox::before{
    opacity:1;                         // 호버 시 다 보이게
    transition: opacity 2s;            // 호버 시 2초 동안 나타난다
}

4. 마우스 호버 시 이미지도 커지게 하기

/* 이미지 오버시 이미지 크게 */

.box1>.imgbox>img{
    display:block;
    width: 100%;
    height:100%;
    border:2px solid green;
    transition: transform 1s;           // 호버 후 1초 동안 돌아가게 하기
...
...
.box1:hover>.imgbox>img{
    transform: scale(1.2);              // 1.2배로 크게
    transition: transform 1s;           // 호버 시 1초 동안 커지게 하기
}

• 이미지는 커지는데 부모의 영역을 벗어난다...

  해결방법 : 노란색 부분 영역에 overflow의 hidden 속성을 사용해주면 된다!!!

.box1>.imgbox{
    display:block;
    position:relative;
    overflow:hidden;                  // 넘치는 부분은 숨긴다
    border:2px solid gold;
}

---

Today Comment :
after, before...그 미세한 차이를 이해해도 백지에서 시작하면 실수가 일어난다. 좀 더 연습하자

처음에는 어떤 속성을 사용해야 할지 몰라서 한 세월... transform overflow 등등을 활용하는 것이 좋은 연습이 되었다

'아 이럴 때 이렇게도 사용하는구나'라는 좋은 예제인 거 같다