HTML/CSS - Image effect Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Images</title>
    </head>
    <body>
     <div id="loader">
       <center> 
       <div id="load"></div> 
       <p>Please wait....</p>
        </center>
    </div>
        <div id="mainpage">
        <img src="https://drive.google.com/uc?id=1MrAeEUyzJAfLNxG7lZZwXHS4vcY1vJjS" width="50%" alt="">
       <img src="https://drive.google.com/uc?id=1NA0PnH6hd32eap6Fcual6Pq2XOu6mZFH" width="50%" alt="">
       <img src="https://drive.google.com/uc?id=1NSJI1dHgdIH2dhjs2ZAHK8v0368trZrz" width="50%" alt="">
       <img src="https://drive.google.com/uc?id=1NQXWjtEat6Mz58H4AFlm8setq7WpJ1nT" width="50%" alt="">
       <img src="https://drive.google.com/uc?id=1MxEJcQE2IRujzK19DXczU7xdqbMuRLnY" width="50%" alt="">
       <img src="https://drive.google.com/uc?id=1Mf4tltILNi6oNbU3l1uvFg4SerH-JLw_" width="50%" alt="">
       <img src="https://drive.google.com/uc?id=1N9Iiiy-NoAF-Gw8ep7yRIr5MSCjaM03t" width="50%" alt=""></div>
    </body>
</html>

css

img {
    display: block;
    border-radius: 10%;
    animation: rot 1.75s ease-out;
    margin: 25%;
    box-shadow:-4px -4px 4px 4px  rgba(210,210,210,0.8);
     transition:0.2s;   
    
}
@keyframes rot{
    from {
        opacity: 0;
        margin-left: -60%;
    }
    to { transform: rotate(360deg); }
}
img:hover{
    width:80%;
    height:60%;
    margin:10%;
    border:2px solid  blue;
    box-shadow:0px 0px 5px  rgba(0,0,255,0.6),
               0px 0px 10px  rgba(0,0,255,0.6),
               0px 0px 15px  rgba(0,0,255,0.6);
               
}
#mainpage{

BROWSER

Console