画像をクリックして塗りつぶす

Question

私はレイアウトとしてヘッダといくつかの画像をコンテンツとして持っています。画像をクリックすると、画面に合わせて拡大表示されます。 jQueryとJSは公正なゲームです。ここに私が何を持っている、私はちょうどそれがpositionの変更のために移行で動作するように得ることができません。またヘッダーをカバーする必要があります。トップ `追加ヘッダの上に配置する

$(document).ready(function() { 
 
    $("main img").click(function() { 
 
     $(this).toggleClass("click"); 
 
    }); 
 
});

html, body { 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
header { 
 
    height:25%; 
 
    width:100%; 
 
    background-color:blue; 
 
} 
 

 
main { 
 
    display:flex; 
 
    justify-content:space-around; 
 
    flex-wrap:wrap; 
 
} 
 

 
main img { 
 
    padding:1em; 
 
    transition:1s; 
 
} 
 

 
main img.click { 
 
    position:absolute; 
 
    width:100%; 
 
    height:auto; 
 
    padding:0; 
 
    transition:1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
</header> 
 
<main> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
</main>

Answer 1

$(document).ready(function() { 
 

 
    $("img").click(function() { 
 
     if($(this).width() == "100") { 
 
      $($(this).clone(true)).insertAfter(this); 
 
      $(this).css({"position" : "fixed", "z-index" : "3"}); 
 
      $(this).animate({"width" : $(window).width()-32, "height" : $(window).height()-32, "top" : "0px"}, 1000); 
 
     } 
 
     else { 
 
      $(this).animate({"width" : "0px", "height" : "0px", "top" : ((($(window).height()-32)/2)-50)}, 500, function() { 
 
       $(this).remove(); 
 
      }); 
 
     } 
 
    }); 
 
});

html, body { 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
header { 
 
    height:25%; 
 
    width:100%; 
 
    background-color:blue; 
 
} 
 

 
main { 
 
    display:flex; 
 
    justify-content:space-around; 
 
    flex-wrap:wrap; 
 
} 
 

 
main img { 
 
    padding:1em; 
 
} 
 

 
main { 
 
    position:absolute; 
 
    width:100%; 
 
    height:auto; 
 
    padding:0; 
 
} 
 

 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
    z-index: 2; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
</header> 
 

 
<main> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
    <img src="https://placehold.it/100x100"> 
 
</main>