Скрытый текст над iFrame

Question

Я только начал вникать в HTML/CSS, и у меня возникла проблема. Я пытаюсь разместить скрытый текст поверх Spotify iFrame, чтобы при наведении курсора на iFrame текст становится видимым, а iFrame становится слегка прозрачным.

Вот код, у меня есть:

HTML

<iframe source="..."></iframe> 
<p class="hiddentext">Testing</p> 

CSS

iframe{ 
    padding:20px; 
    justify-content: center; 
    width: 100%; 
    margin: auto; 
} 

.hiddentext { 
    position: absolute; 
    top: 103px; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    visibility: hidden; 
    opacity: 0; 
} 

iframe:hover { 
    opacity: 0.6; 
} 

iframe:hover .hiddentext { 
    visibility: visible; 
    opacity: 1; 
} 

Когда я пытаюсь запустить его, то становится прозрачным плавающий фрейм, но текст не отображается. Если я установил видимость видимым и непрозрачность в 1 в .hiddentext {}, текст будет таким, чтобы я предположил, что есть проблема с iframe: hover .hiddentext {} part. Пожалуйста помоги!

Answer 1

добавить этот путь :hover CSS

iframe:hover + .hiddentext { 
    visibility: visible; 
    opacity: 1; 
} 

https://jsfiddle.net/8wr8fa2p/

Answer 2

Я пытался изменить вас код

<style> 
iframe { 
     padding: 20px; 
     text-align: center; 
     width: 100%; 
     margin: auto; 
} 
.hiddentext { 
    position: absolute; 
    top: 103px; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    visibility: hidden; 
    opacity: 0; 
}  
iframe:hover { 
    opacity: 0.6; 
}  
#test:hover p { 
    visibility: visible; 
    opacity: 1; 
} 
</style> 


<div id="test"> 
    <iframe src="http://www.w3schools.com"></iframe> 
    <p class="hiddentext">Testing</p> 
</div>