Сделайте непрозрачный div с текстом, появляющимся над окном изображения над изображением при наведении на объект

Question

У меня есть текст, который появляется поверх изображения при наведении на изображение. Изначально, у меня также было полное изображение, непрозрачное при наведении.

Теперь я решил, что хочу сделать только часть изображения непрозрачной при зависании, часть с текстом. Я попробовал учебник here. К сожалению, когда я сделал эти изменения, ничего не появляется, когда я наводил на изображение изображение, а не текст или непрозрачный фильтр.

Вот мой HTML-файл:

<div class="container"> 
    <div class="main"> 
    <div class = "JFK"> 
     <h6>JFK</h6> 
     <div class = "transbox"> 
      <p> <a href = "#">to</a> 
      <a href = "#">from</a></p> 
     </div> 
    </div> 
/* continues on*/ 

Вот мой CSS:

JFK { 
    position: relative; 
    left: 110px; 
    height: 300px; 
    width: 300px; 
    bottom: 40px; 
    background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg); 
    line-height: 200px; 
    text-align: center; 
    font-variant: small-caps; 
    display: block; 
} 

.transbox{ 
    margin: 30px; 
    background-color: $ffffff; 
    border: 1px solid black; 
    opacity: 0.6;  
    display: none; 
} 
.JFK h6{ 
    font-size: 30px; 
    font-variant: small-caps; 
    font-weight: 600; 

} 
.transbox p{ 
    position: relative; 
    top: -90px; 
    word-spacing: 100px; 
    font-size: 30px; 
    font-variant: small-caps; 
    font-weight: 600; 
    color: #c4d8e2; 
    display: none; 
} 
.JFK p a{ 
    color: #c4d8e2; 
    top: -30px; 
} 
.JFK:hover transbox p { 
    display: block; 
} 

.JFK:hover{ 
    display: block; 
} 

.JFK: hover transbox{ 
    display: block; 
    opacity:0.6; 
} 

Я думал, что добавили класс-обертку, как предложил here путем добавления TRANSBOX DIV. Я также попробовал фоновый цвет: rgba (255,0,0,0,5); трюк упомянутый here. Не повезло - до сих пор ничего не происходит при наведении. Какие-либо предложения?

Answer 1

Вашей проблема заключается в этих 2-х частях коды в вашем CSS:

.JFK:hover transbox p { 
    display: block; 
} 

.JFK: hover transbox{ 
    display: block; 
    opacity:0.6; 
} 

Во-первые . отсутствуют в классе transbox - это должен быть .transbox

Во-вторых, есть пробел между .JFK: и hover удалите пространство, и все должно работать.

.JFK:hover .transbox p { 
    display: block; 
} 

.JFK:hover .transbox{ 
    display: block; 
    opacity:0.6; 
} 

Answer 2

Ваш код не заполнен. В «учебнике» вы сказали, что попробовали, <div class = "transbox"> - это всего лишь коробка с прозрачным фоном, которая расположена над другим полем с фоновым изображением. Вы сказали, что вам нужно «только часть изображения становится непрозрачной при наведении».

Кроме того, ваш CSS недействителен. «JFK» - это класс в первой строке, поэтому «.JFK».

Тогда это

.transbox { 
    margin: 30px; 
    background-color: #ffffff; 
} 

Вы снова писали с ошибками.

Вы можете использовать:

.transbox{ 
margin: 30px; 
background-color: rgba(255,255,255,0.6); 
border: 1px solid black; 

}