'Render Iframe on hover

How to efficiently render iframe durig hover as shown here

so far i have this as example

 HTML: <a class="iframe-link" href="https://saheed.codes/uses">Home Page<iframe src="https://saheed.codes/" loading="lazy" style={{width: "100%", height: "600px", border: "0px none"}}></iframe></a>

.

css: 
.iframe-link iframe {
  display: none;
}
.iframe-link:hover iframe {
  display: block;
}

I am working with react, and tailwind for styling and would appreciate answers in that direction.

Thanks!

htmlcssreactjshover


Solution 1:[1]

If you want to avoid using a wrapper for it, you could use opacity directly on the iframe. You would already have a reserved space for it and you wouldn't have to use a wrapper. It depends a bit on your use case, your solution is a valid alternative.

iframe {
  opacity: 0;
  transition: opacity 0.5s linear;
}

iframe:hover {
  opacity: 1;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions