Search code examples
htmlcsswebiframe

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.


Solution

  • #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>