CODEWITHSUNDEEP
cssiframe
Alejandro Suarez
Alejandro Suarez

Reputation: 168

Have <iframe> grow with growing element without overlapping it on pure CSS

I was hoping anyone could assist me with the following issue. As the title mentions, im trying to make an iframe show on hover of another element and grow with it, issue im having is the iframe shows very fast and displays outside of its parent...see the following:

<div id='wrapper'>
       <div class='coolbtn'>
           <h1 class='top'><span class="pictogram">)</span>Policy #142545</h1>
           <p>Google.com</p>
            <p>https://www.google.com"</p>
            <br>
            <iframe id="source" src="http://jsfiddle.net"></iframe>

       </div>
 </div>

http://jsfiddle.net/EajKf/1284/

Thanks in advance

Upvotes: 0

Views: 35

Answers (1)

Bastien Bastiens
Bastien Bastiens

Reputation: 419

Put overflow:hidden for the parent and it will hide the overflow during the transition.

.coolbtn {
  overflow:hidden;
}

jsfiddle

Upvotes: 1

Related Questions