[CSS] hover 시 뒷 배경만 흐리게 하는 방법

2024-01-02

---

사진: Unsplash 의 NEOM

---

1. 방법

 

아래와 같이 div 안에 텍스트가 존재한다고 가정해 보자. 목표는 내부 텍스트는 그대로 유지하고 배경 또는이미지만 blur 처리를 해보는 것이다.

 

html

 

<div class="test_div">
    <h1>Hello world</h1>
</div>

---

css

 

.test_div {
    position: relative;
    width: 500px; /* 슬라이드를 100% 너비로 표시 */
    height: 500px;
}
.test_div::before {
    content: "";
    background-color: red;
    width: 375px;
    height: 500px;
    filter: blur(0px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.test_div:hover::before {
    filter: blur(5px); /* 호버 시에 blur 효과 적용 */
}

 

방법은 크게 어렵지 않다. 실제 배경은 ::before 키워드에 넣어두고 z-index -1로 설정하여 우선순위를 뒤로 만들어 둔다. 이로인해 텍스트가 앞에 보이게 되고, 호버 시에 뒤에 있는 test_div:hover::before 만 blur 처리를 주어 배경만 뿌옇게 만들 수 있게 된다.

---

아래는 실제 호버시에 어떤 형식으로 동작하는지 보여주는 것이다.

 

 

---

메인 이미지 출처 : 사진: Unsplash의NEOM