dimanche 19 décembre 2021

How to display text when hover over an iframe

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.




Aucun commentaire:

Enregistrer un commentaire