백그라운드 오버레이에서 div 요소 제외

Question

오버레이 호버 효과 (기본값 : 약한 검정색 배경색 - 마우스 오버 검정색 없음)와 같은 상태로 유지되는 아이콘과 텍스트가있는 블록을 만들려고합니다. 방법.

아이콘과 텍스트를 동일한 상태로 유지하려면 어떻게해야합니까 (호버 효과 없음)?

Ive는 운이없이 오버레이 div와 아이콘 div에 몇 가지 규칙을 시도했습니다.

어떤 종류의 예외를 제공하는 CSS 규칙이 있습니까?

오버레이 배경이있는 div 외부에 추가하여 작동하도록 만들었지 만, 아이콘과 텍스트 위로 마우스를 가져 가면 호버 효과가 깨져서 제대로 작동하지 않습니다. 오버레이 클래스에 추가 할 Z- 인덱스보다 Z- 인덱스 더 추가하여 아이콘의 클래스 https://www.w3schools.com/code/tryit.asp?filename=FEMUM4N9T30Q

<style> 
.media-front-top-picture{ 
    background-image: url(""); 
    height:500px; 
} 
    .media-front-top-icon{ 
     content: url("); 
     width: 130px; 
     margin: auto; 
     padding-top: 200px; 
     opacity: 1; 
    } 
    .media-front-txt{ 
     font-size: 22px; 
     letter-spacing: 8px; 
     color: white; 
     margin-top: 15px; 
    } 
.media-front-bottom-picture{ 
    background-image: url("h"); 
    height:500px; 
} 
    .media-front-bottom-icon{ 
     content: url(""); 
     width:130px; 
     margin: auto; 
     padding-top: 200px; 
    } 

.media-picture-container { 
    position: relative; 
} 
.media-picture-overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    transition: .5s ease; 
    background-color: rgba(0, 0, 0, 0.47); 
} 

.media-picture-overlay:hover { 
    opacity: 0; 
    cursor:pointer; 
} 
</style> 





<div class="body-media"> 
<div class="media-picture-container"> 
    <div class="media-front-top-picture" style="border-bottom:4px solid white;"> 
    <div class="media-front-top-icon"></div> 
    <div class="media-front-txt">VIDEOS</div> 
    <div class="media-picture-overlay"></div> 
</div> 
</div> 
<div class="media-picture-container"> 
    <div class="media-front-bottom-picture" style="border-bottom:4px solid white;"> 
    <div class="media-front-bottom-icon"></div> 
    <div class="media-front-txt">PICTURES</div> 
    <div class="media-picture-overlay"></div> 
</div> 
</div> 
</div> 

Answer 1

: 여기

는 코드입니다. 또한 아이콘 클래스에 position:relative을 지정하여 Z- 색인이 적용되도록하십시오. 참고로,이 예제는 하나의 아이콘에만 적용됩니다. 다른 곳에서도 적용 할 수 있습니다.

예 :

.media-front-top-icon{ 
    content: url("example.com"); 
    width: 130px; 
    margin: auto; 
    padding-top: 200px; 
    opacity: 1; 
    z-index:10; 
    position:relative; 
} 

.media-picture-overlay { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    transition: .5s ease; 
    background-color: rgba(0, 0, 0, 0.47); 
    z-index:5; 
}