Note that there are some explanatory texts on larger screens.

plurals
  1. POPNG image with "window" over another image
    primarykey
    data
    text
    <p>I'm trying to achieve an effect when one div with png img inside (this img has hole in it) is over another div with img inside that will appear in hole of image over it, but for now it still is over instead of being under img with "window". And I still want to keep div that has to be under img ("iphone-screen") inside div with image with window ("iphone") because of responsive issues (percentage width of inner div is related to width of outer div). How to achieve that? Here's link to my website (go to page "Kontakt"): <a href="http://jimmyweb.pl/projekty/dentmedica/" rel="nofollow">CLICK</a></p> <p>And here's my HTML markup:</p> <pre><code> &lt;div id="slide6" class="slide"&gt; &lt;h1 class="big"&gt;Kontakt&lt;/h1&gt; &lt;h2 class="call"&gt;Zadzwoń: &lt;span class="thick"&gt;514 944 555&lt;/span&gt;&lt;/h2&gt; &lt;h2 class="mail"&gt; Napisz: &lt;a href="mailto:biuro@dentmedica.pl"&gt;&lt;span class="thick"&gt;biuro@dentmedica.pl&lt;/span&gt;&lt;/a&gt; &lt;/h2&gt; &lt;div id="iphone"&gt; &lt;img src="img/iphone.png" alt="" /&gt; &lt;div id="iphone-screen"&gt; &lt;img src="img/iphone-screen.png" alt="" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And CSS:</p> <pre><code>#slide6 #iphone{ position:absolute; bottom:0; right:0; width:40%; z-index:600; } #slide6 #iphone &gt; img{ width:100%; height:auto; z-index:600; } #slide6 #iphone #iphone-screen{ position:absolute; width:44.1%; overflow:hidden; bottom:24%; left:15%; z-index:100; } #slide6 #iphone #iphone-screen &gt; img{ width:100%; height:auto; z-index:100; } </code></pre> <p>Thanks for any help!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload