.animationImg1:hover{
     animation-name: ImageAnimation;
       animation-duration: 5s;
}
.animationImg2:hover{
     animation-name: ImageAnimation;
       animation-duration: 5s;
}
.animationImg3:hover{
     animation-name: ImageAnimation;
       animation-duration: 5s;
}
.animationImg4:hover{
     animation-name: ImageAnimation;
       animation-duration: 5s;
}
@keyframes ImageAnimation{
  0% {
    border: 8px black solid;
    border-radius: 10px;
    box-shadow: 8px 8px 8px gray;
max-width: 280px;
   
  }
  100%{
    transform: translateY(+8px);
        border: 8px black solid;
    border-radius: 10px;
    box-shadow: 8px 8px 8px rgb(63, 63, 63);
 max-width: 280px;
  }
}
.img7 {
  width: 2%;
  float: right;
  margin-right: 2%;
}
.animationImg1 {
  border: 4px black solid;
  border-radius: 15px;
  margin-left: 25%;
 
  box-shadow: 6px 6px 6px rgb(63, 63, 63);
 max-width:280px;
   top: 140px;
  position: fixed;
}
.animationImg2 {
  border: 4px black solid;
  border-radius: 15px;
  margin-left: 45%;
  top: 140px;
  position: fixed;
  box-shadow: 6px 6px 6px rgb(63, 63, 63);
 max-width:280px;
}
.animationImg3 {
  border: 4px black solid;
  border-radius: 15px;
  margin-left: 25%;
  top: 340px;
  position: fixed;
  box-shadow: 6px 6px 6px rgb(63, 63, 63);
 max-width:280px;
}
.animationImg4 {
  border: 4px black solid;
  border-radius: 15px;
  margin-left: 45%;
    top: 340px;
  position: fixed;
  box-shadow: 6px 6px 6px gray;
 max-width:280px;
}
body{
    background-image: linear-gradient(to right,silver,gray);
}