How to display text when hover over an iframe-CodePudding

I'm new here and will start with a special question: When hovering over the iframe with the mouse, a transparent box with a text should appear, which opens a link when clicked. Otherwise, it should remain hidden. The transparent box with a link worked already with this code:

#frame {
  width: 600px;
  height: 330px;
  border: none;
  -moz-transform-origin: 0 0;
  position: relative;
  z-index: 1;
}

#link {
  width: 600px;
  height: 330px;
  background: none;
  position: relative;
  display: block;
  margin-top: -338px;
  z-index: 2;
}

#link:hover {
  background: rgba(255, 255, 255, 0.45);
}

<iframe id="frame" src="https://www.google.de" scrolling=no>
    </iframe>
<a id="link" href="https://www.youtube.com" target="_blank"></a>

But how can i display a text in the middle when hovering over the iframe? It should only apear when the box with the link apears too. Hope someone can help me.

CodePudding user response：

#frame {
  width: 600px;
  height: 330px;
  border: none;
  -moz-transform-origin: 0 0;
  position: relative;
  z-index: 1;
}
    
    #frame:hover   #link {
      opacity: 1;
    }

#link {
  width: 600px;
  height: 330px;
  background: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
}

#link:hover {
  background: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

  <iframe id="frame" src="https://www.google.de" scrolling=no>
    </iframe>
<a id="link" href="https://www.youtube.com" target="_blank">Click here</a>