Make Bild Bildschirm füllen auf klicken

Question

Ich habe ein Layout mit einer Kopfzeile und ein paar Bilder als Inhalt. Ich möchte, wenn ein Bild angeklickt wird, es erweitert, um den Bildschirm mit einem Übergang anzupassen. jQuery und JS sind faires Spiel. Hier ist, was ich habe, ich kann es nur nicht mit Übergang wegen der position Änderungen zu arbeiten. Es sollte auch die Kopfzeile abdecken und nicht.

$(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>