Текст-наложение над img на hover

Question

До сих пор я создал класс container, который содержит элемент img и элемент div, содержащий текст. Моя цель - иметь изображение, которое становится бледным, а текст появляется сверху, когда пользователь наводится на изображение.

Пример ниже работает, но если пользователь наводил верх над div, который содержит текст, исчезнет div. Любые предложения, как я могу отключить это поведение?

#container { 
 
    position: relative; 
 
    width:500px; 
 
    height:auto; 
 
} 
 

 
#center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 18px; 
 
} 
 

 
#overlayImg { 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 1; 
 
    -webkit-transition: all 4s; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease; 
 
} 
 

 
#overlayImg:hover { 
 
    opacity: 0.3; 
 
} 
 

 
#center{ 
 
    opacity: 0; 
 
    -webkit-transition: all 4s; /* Safari */ 
 
    transition: all 1s; 
 
    transition-timing-function: ease; 
 
} 
 

 
#overlayImg:hover + #center { 
 
    opacity: 1; 
 
}

<div class="container" id="container"> 
 

 
    <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway" max-width="100px" max-height="100px"> 
 

 
    <div id="center" class="center"><h1>test test test<h1></div> 
 
</div>

Answer 1

Вы можете добавить pointer-events: none к div

#container { 
 
    position: relative; 
 
    width: 500px; 
 
    height: auto; 
 
} 
 
#center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 18px; 
 
    pointer-events: none; 
 
} 
 
#overlayImg { 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 1; 
 
    -webkit-transition: all 4s; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease; 
 
} 
 
#overlayImg:hover { 
 
    opacity: 0.3; 
 
} 
 
#center { 
 
    opacity: 0; 
 
    -webkit-transition: all 4s; 
 
    /* Safari */ 
 
    transition: all 1s; 
 
    transition-timing-function: ease; 
 
} 
 
#overlayImg:hover + #center { 
 
    opacity: 1; 
 
}

<div class="container" id="container"> 
 

 
    <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway"> 
 

 
    <div id="center" class="center"> 
 
    <h1>test test test</h1> 
 
    </div> 
 
    
 
</div>

или обновить :hover правила, как это

#container:hover #overlayImg { 
    opacity: 0.3; 
} 
#container:hover #center { 
    opacity: 1; 
} 

#container { 
 
    position: relative; 
 
    width: 500px; 
 
    height: auto; 
 
} 
 
#center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size: 18px; 
 
} 
 
#overlayImg { 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 1; 
 
    -webkit-transition: all 4s; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease; 
 
} 
 
#center { 
 
    opacity: 0; 
 
    -webkit-transition: all 4s; 
 
    /* Safari */ 
 
    transition: all 1s; 
 
    transition-timing-function: ease; 
 
} 
 
#container:hover #overlayImg { 
 
    opacity: 0.3; 
 
} 
 
#container:hover #center { 
 
    opacity: 1; 
 
}

<div class="container" id="container"> 
 

 
    <img id="overlayImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/FuBK_testcard_vectorized.svg/768px-FuBK_testcard_vectorized.svg.png" alt="Norway"> 
 

 
    <div id="center" class="center"> 
 
    <h1>test test test</h1> 
 
    </div> 
 
    
 
</div>

Примечание стороны:

Изображения max-width="100px" max-height="100px" не будут работать так, что они либо должны быть такими, рядный,

style="max-width:100px;max-height:100px" 

или внешним, в CSS (рекомендуется)

#overlayImg { 
    width: 100%; 
    max-width: 100px; 
    max-height: 100px; 
    height: auto; 
    opacity: 1; 
    -webkit-transition: all 4s; 
    transition: all 0.5s; 
    transition-timing-function: ease; 
}