Render Iframe on hover-CodePudding

How to efficiently render iframe durig hover as shown here

so far i have this as example

 HTML: <a  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!

CodePudding user response：

Ended Up doing it this way

.iframe-link iframe {
  display: none;
}
.iframe-link:hover iframe {
  -webkit-animation: slow 2s;
       -moz-animation: slow 2s; 
        -ms-animation: slow 2s; 
         -o-animation: slow 2s; 
            animation: slow 2s;
  display: block;
  /* opacity: 1; */

}

@keyframes slow {
  from { opacity: 0; }
  to   { opacity: 1; }
}

CodePudding user response：

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;
}