问:
How to have the opacity on an image move up over time, not instantly using css
When you hover over the each image (scroll to the right to fully see them, click on them to have them move), they move up and their brightness is decreased. When they move up, the images move over a transition of .6 seconds. I have been trying to get the darkness covering each image to move up in the same amount of time, but I can only get it to move instantly when you hover over each image. I'm new to programming and any help that I could would be good. Let me know if you need any more information. Thanks

var click = 0;
function checkClicks(imgs) {

 if(click == 0) {
    // Run your animation on first click
    document.getElementById('column1').classList.add('animate1')
    document.getElementById('column2').classList.add('animate2')
    document.getElementById('column3').classList.add('animate3')
 document.getElementById('column4').classList.add('animate4')
 document.getElementById('column5').classList.add('animate5')
 document.getElementById('column6').classList.add('animate6')
 document.getElementById('column7').classList.add('animate7')
 document.getElementById('column8').classList.add('animate8')
 document.getElementById('column9').classList.add('animate9');
    // hold Images for 1s
  setTimeout(function(){
   myFunction(imgs);
  }, 2000);
 } else {
  myFunction(imgs);
 }

 click = 1;
}
function myFunction(imgs) {

 var expandImg = document.getElementById("expandedImg");
 expandImg.src = imgs.src;
 var imgParagraph = document.getElementById('img-paragraph');
 imgParagraph.innerHTML = imgs.getAttribute("head");

 expandImg.parentElement.style.display = "table-cell";
   imgParagraph.style.display = 'table-cell';
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.topnav {
  background-color: rgb(84, 104, 217);
  overflow: hidden;
  font-family: 'futuralight';
  font-weight: 900;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 21px;
  text-decoration: none;
  font-size: 19px;
  position: relative;
  left: 2%;
}

.topnav a:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.topnav a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.topnav a.active-menu:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.3s ease-in-out 0s;
}

.column {
  float: left;
  width: 25%;
  position: relative;
  background-color:#EEF0FC;
}
.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 500ms;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
}
.column:hover p {
  opacity:1;
  top:-7px;
  transition-duration: .6s;
  height:100%;
 }

.column p {
  pointer-events: none;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  vertical-align: bottom;
}

.column img:hover {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  position: relative;
  top: -7px;
  transition-duration: .6s;
}

#totalbody {
  background-color: #EEF0FC;
  height: 600px;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */

#expandedImg {
  position: absolute;
  height:400px;
  left:300px;
  border-radius:10px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  top: 320px;
  transform: translate(-50%, -50%);
  max-height: 430px;
}

/* Expanding image text */

/* image paragraph */

#img-paragraph {
  display: none;
  vertical-align: top;
  text-align: left;
  position: absolute;
  height: 400px;
  width: 50%;
  background-color: white;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  float: right;
  right: 30px;
  top: 120px;
}

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

.row {
  position: absolute;
  top: 80px;
}

.head1 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head2 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head3 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head4 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head5 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head6 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head7 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head8 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head9 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head1::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head2::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head3::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head4::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head5::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head6::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head7::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head8::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head9::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.para1{
  width: 90%;
  position: relative;
  left: 6%;
  font-size: 17px;
  top: 60px;
  font-family: 'futuralight';
}
#column1 {
  position: absolute;
  width:250px;
  float:left;
  left:600px;
  top:30px;
  font-size:0;
}

.animate1 {
  -webkit-animation: animate1 2s normal ease-out;
  animation: animate1 2s forwards normal ease-out;
}

@-webkit-keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;

  }
}
@keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;
  }
}
#column2 {
  position: absolute;
  width:300px;
  float:left;
  left:350px;
  top:50px;
  font-size:0;
}

.animate2 {
  -webkit-animation: animate2 2s normal ease-out;
  animation: animate2 2s forwards normal ease-out;
}
@-webkit-keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
@keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
#column3 {
  position: absolute;
  width:260px;
  float:left;
  left:400px;
  top:80px;
  font-size:0;
}

.animate3 {
  -webkit-animation: animate3 2s normal ease-out;
  animation: animate3 2s forwards normal ease-out;
}
@-webkit-keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
@keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
#column4 {
  position: absolute;
  width:280px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate4 {
  -webkit-animation: animate4 2s normal ease-out;
  animation: animate4 2s forwards normal ease-out;
}
@-webkit-keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
@keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
#column5 {
  position: absolute;
  width:300px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate5 {
  -webkit-animation: animate5 2s normal ease-out;
  animation: animate5 2s forwards normal ease-out;
}
@-webkit-keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
@keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
#column6 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate6 {
  -webkit-animation: animate6 2s normal ease-out;
  animation: animate6 2s forwards normal ease-out;
}
@-webkit-keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
@keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
#column7 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate7 {
  -webkit-animation: animate7 2s normal ease-out;
  animation: animate7 2s forwards normal ease-out;
}
@-webkit-keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
@keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
#column8 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate8 {
  -webkit-animation: animate8 2s normal ease-out;
  animation: animate8 2s forwards normal ease-out;
}
@-webkit-keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
@keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
#column9 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate9 {
  -webkit-animation: animate9 2s normal ease-out;
  animation: animate9 2s forwards normal ease-out;
}
@-webkit-keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
  }
}
.footer{
  position:relative;
  background-color:rgb(84,104,217);
  height:80px;
  top:546px;
  color:white;
  overflow: hidden;
}
.footwords{
  padding-top:32px;
  font-family: 'playfair_displayregular';
  position: relative;
  left:6%;
}
@media only screen and (max-width: 1250px) and (min-width: 1150px) {
  .topnav {
    background-color: green;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:350px;
    left:262px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1150px) and (min-width: 1050px) {
  .topnav {
    background-color: navy;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:340px;
    left:252px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1050px) and (min-width: 930px) {
  .topnav {
    background-color: brown;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:300px;
    left:228px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 930px) and (min-width: 850px) {
  .topnav {
    background-color: magenta;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:270px;
    left:210px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 850px) and (min-width: 800px) {
  .topnav {
    background-color: yellow;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:250px;
    left:188px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 800px) and (min-width: 735px) {
  .topnav {
    background-color: red;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:230px;
    left:178px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 735px) and (min-width: 645px) {
  .topnav {
    background-color: moccasin;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:210px;
    left:150px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 645px) {
  .topnav {
    background-color: black;
    overflow: hidden;
  }
}</code>```

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/styleprojects.css" />

    <title>Projects</title>

    Home
    Academics
    Projects
    Community Service

this will be shown on the hover 1

this will be shown on the hover 2

this will be shown on the hover 3

this will be shown on the hover 4

this will be shown on the hover 5

this will be shown on the hover 6

this will be shown on the hover 7

this will be shown on the hover 8

this will be shown on the hover 9

      © 2020 By Rom Fradkin. Proudly Individually Coded.

```

答:
All you need to do is apply same time duration on both the elements, and change the position on hover of column as you were doing with Paragraph.

and it will be better if you will transform the whole column not the separate inner items, Because Transition property you should use very carefully as it will effect the GPU performance and sometime you will see a lag or jerk in transtions,

var click = 0;
function checkClicks(imgs) {

 if(click == 0) {
    // Run your animation on first click
    document.getElementById('column1').classList.add('animate1')
    document.getElementById('column2').classList.add('animate2')
    document.getElementById('column3').classList.add('animate3')
 document.getElementById('column4').classList.add('animate4')
 document.getElementById('column5').classList.add('animate5')
 document.getElementById('column6').classList.add('animate6')
 document.getElementById('column7').classList.add('animate7')
 document.getElementById('column8').classList.add('animate8')
 document.getElementById('column9').classList.add('animate9');
    // hold Images for 1s
  setTimeout(function(){
   myFunction(imgs);
  }, 2000);
 } else {
  myFunction(imgs);
 }

 click = 1;
}
function myFunction(imgs) {

 var expandImg = document.getElementById("expandedImg");
 expandImg.src = imgs.src;
 var imgParagraph = document.getElementById('img-paragraph');
 imgParagraph.innerHTML = imgs.getAttribute("head");

 expandImg.parentElement.style.display = "table-cell";
   imgParagraph.style.display = 'table-cell';
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.topnav {
  background-color: rgb(84, 104, 217);
  overflow: hidden;
  font-family: 'futuralight';
  font-weight: 900;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 21px;
  text-decoration: none;
  font-size: 19px;
  position: relative;
  left: 2%;
}

.topnav a:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.topnav a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.topnav a.active-menu:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.3s ease-in-out 0s;
}

.column {
  float: left;
  width: 25%;
  position: relative;
  background-color:#EEF0FC;
}
.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 500ms;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
}
.column p {
  transition: top .6s;
  transition-duration: .6s;
 top: 0;
}
.column:hover p {
  opacity:1;
  top:-7px;
  height:100%;
 }

.column p {
  pointer-events: none;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  vertical-align: bottom;
}

.column:hover img {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  position: relative;
  top: -7px;
  transition-duration: .6s;
}

#totalbody {
  background-color: #EEF0FC;
  height: 600px;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */

#expandedImg {
  position: absolute;
  height:400px;
  left:300px;
  border-radius:10px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  top: 320px;
  transform: translate(-50%, -50%);
  max-height: 430px;
}

/* Expanding image text */

/* image paragraph */

#img-paragraph {
  display: none;
  vertical-align: top;
  text-align: left;
  position: absolute;
  height: 400px;
  width: 50%;
  background-color: white;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  float: right;
  right: 30px;
  top: 120px;
}

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

.row {
  position: absolute;
  top: 80px;
}

.head1 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head2 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head3 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head4 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head5 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head6 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head7 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head8 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head9 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head1::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head2::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head3::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head4::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head5::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head6::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head7::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head8::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head9::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.para1{
  width: 90%;
  position: relative;
  left: 6%;
  font-size: 17px;
  top: 60px;
  font-family: 'futuralight';
}
#column1 {
  position: absolute;
  width:250px;
  float:left;
  left:600px;
  top:30px;
  font-size:0;
}

.animate1 {
  -webkit-animation: animate1 2s normal ease-out;
  animation: animate1 2s forwards normal ease-out;
}

@-webkit-keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;

  }
}
@keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;
  }
}
#column2 {
  position: absolute;
  width:300px;
  float:left;
  left:350px;
  top:50px;
  font-size:0;
}

.animate2 {
  -webkit-animation: animate2 2s normal ease-out;
  animation: animate2 2s forwards normal ease-out;
}
@-webkit-keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
@keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
#column3 {
  position: absolute;
  width:260px;
  float:left;
  left:400px;
  top:80px;
  font-size:0;
}

.animate3 {
  -webkit-animation: animate3 2s normal ease-out;
  animation: animate3 2s forwards normal ease-out;
}
@-webkit-keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
@keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
#column4 {
  position: absolute;
  width:280px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate4 {
  -webkit-animation: animate4 2s normal ease-out;
  animation: animate4 2s forwards normal ease-out;
}
@-webkit-keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
@keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
#column5 {
  position: absolute;
  width:300px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate5 {
  -webkit-animation: animate5 2s normal ease-out;
  animation: animate5 2s forwards normal ease-out;
}
@-webkit-keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
@keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
#column6 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate6 {
  -webkit-animation: animate6 2s normal ease-out;
  animation: animate6 2s forwards normal ease-out;
}
@-webkit-keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
@keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
#column7 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate7 {
  -webkit-animation: animate7 2s normal ease-out;
  animation: animate7 2s forwards normal ease-out;
}
@-webkit-keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
@keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
#column8 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate8 {
  -webkit-animation: animate8 2s normal ease-out;
  animation: animate8 2s forwards normal ease-out;
}
@-webkit-keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
@keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
#column9 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate9 {
  -webkit-animation: animate9 2s normal ease-out;
  animation: animate9 2s forwards normal ease-out;
}
@-webkit-keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
  }
}
.footer{
  position:relative;
  background-color:rgb(84,104,217);
  height:80px;
  top:546px;
  color:white;
  overflow: hidden;
}
.footwords{
  padding-top:32px;
  font-family: 'playfair_displayregular';
  position: relative;
  left:6%;
}
@media only screen and (max-width: 1250px) and (min-width: 1150px) {
  .topnav {
    background-color: green;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:350px;
    left:262px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1150px) and (min-width: 1050px) {
  .topnav {
    background-color: navy;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:340px;
    left:252px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1050px) and (min-width: 930px) {
  .topnav {
    background-color: brown;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:300px;
    left:228px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 930px) and (min-width: 850px) {
  .topnav {
    background-color: magenta;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:270px;
    left:210px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 850px) and (min-width: 800px) {
  .topnav {
    background-color: yellow;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:250px;
    left:188px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 800px) and (min-width: 735px) {
  .topnav {
    background-color: red;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:230px;
    left:178px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 735px) and (min-width: 645px) {
  .topnav {
    background-color: moccasin;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:210px;
    left:150px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 645px) {
  .topnav {
    background-color: black;
    overflow: hidden;
  }
}</code>```

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/styleprojects.css" />

    <title>Projects</title>

    Home
    Academics
    Projects
    Community Service

this will be shown on the hover 1

this will be shown on the hover 2

this will be shown on the hover 3

this will be shown on the hover 4

this will be shown on the hover 5

this will be shown on the hover 6

this will be shown on the hover 7

this will be shown on the hover 8

this will be shown on the hover 9

      © 2020 By Rom Fradkin. Proudly Individually Coded.

```

Body:
When you hover over the each image (scroll to the right to fully see them, click on them to have them move), they move up and their brightness is decreased. When they move up, the images move over a transition of .6 seconds. I have been trying to get the darkness covering each image to move up in the same amount of time, but I can only get it to move instantly when you hover over each image. I'm new to programming and any help that I could would be good. Let me know if you need any more information. Thanks

var click = 0;
function checkClicks(imgs) {

 if(click == 0) {
    // Run your animation on first click
    document.getElementById('column1').classList.add('animate1')
    document.getElementById('column2').classList.add('animate2')
    document.getElementById('column3').classList.add('animate3')
 document.getElementById('column4').classList.add('animate4')
 document.getElementById('column5').classList.add('animate5')
 document.getElementById('column6').classList.add('animate6')
 document.getElementById('column7').classList.add('animate7')
 document.getElementById('column8').classList.add('animate8')
 document.getElementById('column9').classList.add('animate9');
    // hold Images for 1s
  setTimeout(function(){
   myFunction(imgs);
  }, 2000);
 } else {
  myFunction(imgs);
 }

 click = 1;
}
function myFunction(imgs) {

 var expandImg = document.getElementById("expandedImg");
 expandImg.src = imgs.src;
 var imgParagraph = document.getElementById('img-paragraph');
 imgParagraph.innerHTML = imgs.getAttribute("head");

 expandImg.parentElement.style.display = "table-cell";
   imgParagraph.style.display = 'table-cell';
}

@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.topnav {
  background-color: rgb(84, 104, 217);
  overflow: hidden;
  font-family: 'futuralight';
  font-weight: 900;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 21px;
  text-decoration: none;
  font-size: 19px;
  position: relative;
  left: 2%;
}

.topnav a:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.topnav a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.topnav a.active-menu:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.3s ease-in-out 0s;
}

.column {
  float: left;
  width: 25%;
  position: relative;
  background-color:#EEF0FC;
}
.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 500ms;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
}
.column:hover p {
  opacity:1;
  top:-7px;
  transition-duration: .6s;
  height:100%;
 }

.column p {
  pointer-events: none;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  vertical-align: bottom;
}

.column img:hover {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  position: relative;
  top: -7px;
  transition-duration: .6s;
}

#totalbody {
  background-color: #EEF0FC;
  height: 600px;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */

#expandedImg {
  position: absolute;
  height:400px;
  left:300px;
  border-radius:10px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  top: 320px;
  transform: translate(-50%, -50%);
  max-height: 430px;
}

/* Expanding image text */

/* image paragraph */

#img-paragraph {
  display: none;
  vertical-align: top;
  text-align: left;
  position: absolute;
  height: 400px;
  width: 50%;
  background-color: white;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  float: right;
  right: 30px;
  top: 120px;
}

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

.row {
  position: absolute;
  top: 80px;
}

.head1 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head2 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head3 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head4 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head5 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head6 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head7 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head8 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head9 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head1::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head2::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head3::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head4::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head5::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head6::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head7::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head8::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head9::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.para1{
  width: 90%;
  position: relative;
  left: 6%;
  font-size: 17px;
  top: 60px;
  font-family: 'futuralight';
}
#column1 {
  position: absolute;
  width:250px;
  float:left;
  left:600px;
  top:30px;
  font-size:0;
}

.animate1 {
  -webkit-animation: animate1 2s normal ease-out;
  animation: animate1 2s forwards normal ease-out;
}

@-webkit-keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;

  }
}
@keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;
  }
}
#column2 {
  position: absolute;
  width:300px;
  float:left;
  left:350px;
  top:50px;
  font-size:0;
}

.animate2 {
  -webkit-animation: animate2 2s normal ease-out;
  animation: animate2 2s forwards normal ease-out;
}
@-webkit-keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
@keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
#column3 {
  position: absolute;
  width:260px;
  float:left;
  left:400px;
  top:80px;
  font-size:0;
}

.animate3 {
  -webkit-animation: animate3 2s normal ease-out;
  animation: animate3 2s forwards normal ease-out;
}
@-webkit-keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
@keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
#column4 {
  position: absolute;
  width:280px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate4 {
  -webkit-animation: animate4 2s normal ease-out;
  animation: animate4 2s forwards normal ease-out;
}
@-webkit-keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
@keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
#column5 {
  position: absolute;
  width:300px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate5 {
  -webkit-animation: animate5 2s normal ease-out;
  animation: animate5 2s forwards normal ease-out;
}
@-webkit-keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
@keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
#column6 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate6 {
  -webkit-animation: animate6 2s normal ease-out;
  animation: animate6 2s forwards normal ease-out;
}
@-webkit-keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
@keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
#column7 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate7 {
  -webkit-animation: animate7 2s normal ease-out;
  animation: animate7 2s forwards normal ease-out;
}
@-webkit-keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
@keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
#column8 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate8 {
  -webkit-animation: animate8 2s normal ease-out;
  animation: animate8 2s forwards normal ease-out;
}
@-webkit-keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
@keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
#column9 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate9 {
  -webkit-animation: animate9 2s normal ease-out;
  animation: animate9 2s forwards normal ease-out;
}
@-webkit-keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
  }
}
.footer{
  position:relative;
  background-color:rgb(84,104,217);
  height:80px;
  top:546px;
  color:white;
  overflow: hidden;
}
.footwords{
  padding-top:32px;
  font-family: 'playfair_displayregular';
  position: relative;
  left:6%;
}
@media only screen and (max-width: 1250px) and (min-width: 1150px) {
  .topnav {
    background-color: green;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:350px;
    left:262px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1150px) and (min-width: 1050px) {
  .topnav {
    background-color: navy;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:340px;
    left:252px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1050px) and (min-width: 930px) {
  .topnav {
    background-color: brown;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:300px;
    left:228px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 930px) and (min-width: 850px) {
  .topnav {
    background-color: magenta;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:270px;
    left:210px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 850px) and (min-width: 800px) {
  .topnav {
    background-color: yellow;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:250px;
    left:188px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 800px) and (min-width: 735px) {
  .topnav {
    background-color: red;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:230px;
    left:178px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 735px) and (min-width: 645px) {
  .topnav {
    background-color: moccasin;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:210px;
    left:150px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 645px) {
  .topnav {
    background-color: black;
    overflow: hidden;
  }
}

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/styleprojects.css" />

    <title>Projects</title>

    Home
    Academics
    Projects
    Community Service

this will be shown on the hover 1

this will be shown on the hover 2

this will be shown on the hover 3

this will be shown on the hover 4

this will be shown on the hover 5

this will be shown on the hover 6

this will be shown on the hover 7

this will be shown on the hover 8

this will be shown on the hover 9

      © 2020 By Rom Fradkin. Proudly Individually Coded.

Body:
All you need to do is apply same time duration on both the elements, and change the position on hover of column as you were doing with Paragraph.

and it will be better if you will transform the whole column not the separate inner items, Because Transition property you should use very carefully as it will effect the GPU performance and sometime you will see a lag or jerk in transtions,

var click = 0;
function checkClicks(imgs) {

 if(click == 0) {
    // Run your animation on first click
    document.getElementById('column1').classList.add('animate1')
    document.getElementById('column2').classList.add('animate2')
    document.getElementById('column3').classList.add('animate3')
 document.getElementById('column4').classList.add('animate4')
 document.getElementById('column5').classList.add('animate5')
 document.getElementById('column6').classList.add('animate6')
 document.getElementById('column7').classList.add('animate7')
 document.getElementById('column8').classList.add('animate8')
 document.getElementById('column9').classList.add('animate9');
    // hold Images for 1s
  setTimeout(function(){
   myFunction(imgs);
  }, 2000);
 } else {
  myFunction(imgs);
 }

 click = 1;
}
function myFunction(imgs) {

 var expandImg = document.getElementById("expandedImg");
 expandImg.src = imgs.src;
 var imgParagraph = document.getElementById('img-paragraph');
 imgParagraph.innerHTML = imgs.getAttribute("head");

 expandImg.parentElement.style.display = "table-cell";
   imgParagraph.style.display = 'table-cell';
}

@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.topnav {
  background-color: rgb(84, 104, 217);
  overflow: hidden;
  font-family: 'futuralight';
  font-weight: 900;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 21px;
  text-decoration: none;
  font-size: 19px;
  position: relative;
  left: 2%;
}

.topnav a:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.topnav a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.topnav a.active-menu:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.3s ease-in-out 0s;
}

.column {
  float: left;
  width: 25%;
  position: relative;
  background-color:#EEF0FC;
}
.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 500ms;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
}
.column p {
  transition: top .6s;
  transition-duration: .6s;
 top: 0;
}
.column:hover p {
  opacity:1;
  top:-7px;
  height:100%;
 }

.column p {
  pointer-events: none;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  vertical-align: bottom;
}

.column:hover img {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  position: relative;
  top: -7px;
  transition-duration: .6s;
}

#totalbody {
  background-color: #EEF0FC;
  height: 600px;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */

#expandedImg {
  position: absolute;
  height:400px;
  left:300px;
  border-radius:10px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  top: 320px;
  transform: translate(-50%, -50%);
  max-height: 430px;
}

/* Expanding image text */

/* image paragraph */

#img-paragraph {
  display: none;
  vertical-align: top;
  text-align: left;
  position: absolute;
  height: 400px;
  width: 50%;
  background-color: white;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  float: right;
  right: 30px;
  top: 120px;
}

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

.row {
  position: absolute;
  top: 80px;
}

.head1 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head2 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head3 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head4 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head5 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head6 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}
.head7 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head8 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head9 {
  position: relative;
  left: 12px;
  top: 16px;
  color: rgb(84, 104, 217);
  font-weight: 900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
  padding-left:4%;
  padding-top:30px;
}

.head1::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head2::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head3::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head4::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head5::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head6::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head7::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head8::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.head9::before {
  content: '';
  background-color: rgb(84, 104, 217);
  width: 12px;
  height: 100%;
  position: absolute;
  right: 100%;
  bottom: -16px;
}
.para1{
  width: 90%;
  position: relative;
  left: 6%;
  font-size: 17px;
  top: 60px;
  font-family: 'futuralight';
}
#column1 {
  position: absolute;
  width:250px;
  float:left;
  left:600px;
  top:30px;
  font-size:0;
}

.animate1 {
  -webkit-animation: animate1 2s normal ease-out;
  animation: animate1 2s forwards normal ease-out;
}

@-webkit-keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;

  }
}
@keyframes animate1 {
  0% {
      top:00px;
  }
  100% {
      position: absolute;
      top: 500px;
      left:300px;
  }
}
#column2 {
  position: absolute;
  width:300px;
  float:left;
  left:350px;
  top:50px;
  font-size:0;
}

.animate2 {
  -webkit-animation: animate2 2s normal ease-out;
  animation: animate2 2s forwards normal ease-out;
}
@-webkit-keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
@keyframes animate2 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:50px;
  }
}
#column3 {
  position: absolute;
  width:260px;
  float:left;
  left:400px;
  top:80px;
  font-size:0;
}

.animate3 {
  -webkit-animation: animate3 2s normal ease-out;
  animation: animate3 2s forwards normal ease-out;
}
@-webkit-keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
@keyframes animate3 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:600px;
  }
}
#column4 {
  position: absolute;
  width:280px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate4 {
  -webkit-animation: animate4 2s normal ease-out;
  animation: animate4 2s forwards normal ease-out;
}
@-webkit-keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
@keyframes animate4 {
  0% {
      top:00px;
  }
  100% {
    position: absolute;
    top: 700px;
    left:100px;
  }
}
#column5 {
  position: absolute;
  width:300px;
  float:left;
  left:300px;
  top:80px;
  font-size:0;
}

.animate5 {
  -webkit-animation: animate5 2s normal ease-out;
  animation: animate5 2s forwards normal ease-out;
}
@-webkit-keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
@keyframes animate5 {
  0% {
    top:00px;
  }
  100% {
    position: absolute;
    top: 500px;
    left:900px;
  }
}
#column6 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate6 {
  -webkit-animation: animate6 2s normal ease-out;
  animation: animate6 2s forwards normal ease-out;
}
@-webkit-keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
@keyframes animate6 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:500px;
  }
}
#column7 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate7 {
  -webkit-animation: animate7 2s normal ease-out;
  animation: animate7 2s forwards normal ease-out;
}
@-webkit-keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
@keyframes animate7 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:1000px;
  }
}
#column8 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate8 {
  -webkit-animation: animate8 2s normal ease-out;
  animation: animate8 2s forwards normal ease-out;
}
@-webkit-keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
@keyframes animate8 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:200px;
  }
}
#column9 {
  position: absolute;
  width:300px;
  float:left;
  left:600px;
  font-size:0;
}

.animate9 {
  -webkit-animation: animate9 2s normal ease-out;
  animation: animate9 2s forwards normal ease-out;
}
@-webkit-keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
  }
}
.footer{
  position:relative;
  background-color:rgb(84,104,217);
  height:80px;
  top:546px;
  color:white;
  overflow: hidden;
}
.footwords{
  padding-top:32px;
  font-family: 'playfair_displayregular';
  position: relative;
  left:6%;
}
@media only screen and (max-width: 1250px) and (min-width: 1150px) {
  .topnav {
    background-color: green;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:350px;
    left:262px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1150px) and (min-width: 1050px) {
  .topnav {
    background-color: navy;
    overflow: hidden;
  }
  #expandedImg {
    position: absolute;
    height:340px;
    left:252px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }

}
@media only screen and (max-width: 1050px) and (min-width: 930px) {
  .topnav {
    background-color: brown;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:300px;
    left:228px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 930px) and (min-width: 850px) {
  .topnav {
    background-color: magenta;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:270px;
    left:210px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 850px) and (min-width: 800px) {
  .topnav {
    background-color: yellow;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:250px;
    left:188px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 800px) and (min-width: 735px) {
  .topnav {
    background-color: red;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:230px;
    left:178px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}
@media only screen and (max-width: 735px) and (min-width: 645px) {
  .topnav {
    background-color: moccasin;
    overflow: hidden;
  }
  #img-paragraph {
    display: none;
    vertical-align: top;
    text-align: left;
    position: absolute;
    height: 350px;
    width: 50%;
    background-color: white;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    float: right;
    right: 30px;
    top: 145px;
  }
  #expandedImg {
    position: absolute;
    height:210px;
    left:150px;
    border-radius:10px;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    top: 320px;
    transform: translate(-50%, -50%);
    max-height: 430px;
  }
}

@media only screen and (max-width: 645px) {
  .topnav {
    background-color: black;
    overflow: hidden;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/styleprojects.css" />
    <script src='../Javascript/script.js'></script>
    <script src='../Javascript/fix.js'></script>
    <script src='../Javascript/jquery-3.5.1.min.js'></script>
    <title>Projects</title>
</head>
<body id='totalbody'>

  <header class="topnav" id="topnav">
    <a class="link" href="../index.html">Home</a>
    <a class="link" href="#Academics">Academics</a>
    <a class="active-menu" href="projects.html">Projects</a>
    <a class="link" href="communityservice.html">Community Service</a>
  </header>

  <div>
    <div id="expanded-wrapper">
      <img id="expandedImg">
      <p id="img-paragraph"></p>
    </div>
  </div>

  <div class="row">
    <div class="column" id='column1'>
      <img class='arcadeimg' src="../Images/arcade.jpeg" alt="Arcade" style="width:100%" head="<p class='head1'> Parapraph #1 </p><p class='para1'> Lorem ipsum dolor si
        t amet consectetur adipisicing
         elit. Sed natus, recusandae veritatis ipsum quia commodi tenetur laboriosam pariatur nihil incidunt architecto velit so
        luta placeat repellat asperiores iure eos dolorum fugiat?</p>"  onclick="checkClicks(this);">
        <p id='column1p'>this will be shown on the hover 1</p>
    </div>
    <div class="column" id='column2'>
      <img src="../Images/car.png"
        alt="Car" style="width:100%" head="<p class='head2'> Parapraph #2 </p>" onclick="checkClicks(this);">
        <p>this will be shown on the hover 2</p>
    </div>
    <div class="column" id='column3'>
      <img src="../Images/pinball.jpeg" alt="Pinball Machine" style="width:100%" head="<p class='head3'> Parapraph #3 </p>" onclick="checkClicks(this);">
      <p>this will be shown on the hover 3</p>
    </div>
    <div class="column" id='column4'>
      <img src="../Images/vending.jpeg" alt="Vending Machine" style="width:100%" head="<p class='head4'> Parapraph #4 </p>" onclick="checkClicks(this);">
      <p>this will be shown on the hover 4</p>
    </div>
    <div class="column" id='column5'>
      <img src="../Images/sriraques.jpeg" alt="Sriracha Quesadillas" style="width:100%" head="<p class='head5'> Parapraph #5 </p>" onclick="checkClicks(this);">
      <p>this will be shown on the hover 5</p>
    </div>
    <div class="column" id='column6'>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTWUVh_Aa4CeLecqvG5L-Xzej1kc1tKwDriiWAVWuUMms5JLHQt&usqp=CAU" alt="Lights" style="width:100%" head="<p class='head6'>  web code </p>" onclick="checkClicks(this);">
      <p>this will be shown on the hover 6</p>
    </div>
    <div class="column" id='column7'>
      <img src="https://opticsmag.com/wp-content/uploads/2019/04/a-telescope.jpg" alt="Lights" style="width:100%" head="<p class='head7'> computer </p>" onclick="checkClicks(this);">
      <p>this will be shown on the hover 7</p>
    </div>
    <div class="column" id='column8'>
      <img src="https://nctennis.com/common/controls/image_handler.aspx?thumb_id=13&image_path=/images/2018/11/27/Wheelchair.jpg" alt="Lights" style="width:100%" head="<p class='head8'> adap tennis </p>" onclick="checkClicks(this);">
      <p>this will be shown on the hover 8</p>
    </div>
    <div class="column" id='column9'>
      <img src="https://cdn.britannica.com/77/170477-050-1C747EE3/Laptop-computer.jpg" alt="Lights" style="width:100%" head="<p class='head9'> telescope </p>" onclick="checkClicks(this);">
      <p>this will be shown on the hover 9</p>
    </div>
    </div>
  </div>
  <footer class='footer'>
    <p class='footwords'>
      © 2020 By Rom Fradkin. Proudly Individually Coded.
    </p>
  </footer>
</body>
</html>


来源: stackexchange

问:
Apollo Gateway on AWS Lambda Cannot read property 'content-type' of undefined
I have a Node Apollo Gateway service running on AWS Lambda, it delegates to two different GraphQL services, it all works fine locally on my Mac.

However, when running on AWS Lambda, the gateway gives me this error when I hit the end point (expecting to see the playground)

```<code>{
"errorType": "TypeError",
"errorMessage": "Cannot read property 'content-type' of undefined",
"trace": [
"TypeError: Cannot read property 'content-type' of undefined",
"    at fileUploadHandler (/var/task/node_modules/apollo-server-lambda/dist/ApolloServer.js:143:50)",
"    at Runtime.handler (/var/task/node_modules/apollo-server-lambda/dist/ApolloServer.js:166:13)",
"    at Runtime.handleOnce (/var/runtime/Runtime.js:66:25)"
]
}
</code>```

I'm not doing anything with uploading, but looking at ApolloServer.js, I can see a handler is made.

My index.js looks like this:

```<code>const isLambda = !!process.env.LAMBDA_TASK_ROOT;

const { ApolloServer, gql } = isLambda ? require('apollo-server-lambda') : require('apollo-server');

const { ApolloGateway, RemoteGraphQLDataSource } = require("@apollo/gateway");

const gateway = new ApolloGateway({
  serviceList: [
    { name: 'service1', url: !isLambda ? 'http://127.0.0.1:5090' : 'https://api.blah.com/search' },
    { name: 'service2', url: !isLambda ? 'http://127.0.0.1:5110' : 'https://api.elsewhere.com/other' },
 ],
});

const server = new ApolloServer({
  gateway,
  subscriptions: false,
  uploads: false,
  context: ({ event, context }) => ({
    headers: event.headers,
    functionName: context.functionName,
    event,
    context,
  }),
  playground: true,
  introspection: true,
});

if (!isLambda) {
    server.listen().then(({ url }) => {
      console.log(` Server ready at ${url}`);
    });
} else {
    exports.graphql = server.createHandler({
      cors: {
        origin: '*',
        credentials: true,
      },
    });
}
</code>```

The NPM modules I'm using with this are:

```<code>npm install  @apollo/gateway apollo-server-lambda graphql
</code>```

Any pointers on what might be going wrong here?

Update 25th May 2020
It seems to be related to whether I choose between HTTP or REST in AWS Gateway, HTTP gets me past this error, but I've no idea what I need to do to make it work in REST

Thanks

Chris

答:
You won't make it work in REST because apollo's code was not written thinking about receiving input from AWS API Gateway.

It expects to handle the whole request. So either you use the API Gateway as proxy or you'll have to fake all the other properties that it is expecting to exist.

ContentLicense: CC BY-SA 4.0

Body:
I have a Node Apollo Gateway service running on AWS Lambda, it delegates to two different GraphQL services, it all works fine locally on my Mac.

However, when running on AWS Lambda, the gateway gives me this error when I hit the end point (expecting to see the playground)

{
"errorType": "TypeError",
"errorMessage": "Cannot read property 'content-type' of undefined",
"trace": [
"TypeError: Cannot read property 'content-type' of undefined",
"    at fileUploadHandler (/var/task/node_modules/apollo-server-lambda/dist/ApolloServer.js:143:50)",
"    at Runtime.handler (/var/task/node_modules/apollo-server-lambda/dist/ApolloServer.js:166:13)",
"    at Runtime.handleOnce (/var/runtime/Runtime.js:66:25)"
]
}

I'm not doing anything with uploading, but looking at ApolloServer.js, I can see a handler is made.

My index.js looks like this:

const isLambda = !!process.env.LAMBDA_TASK_ROOT;

const { ApolloServer, gql } = isLambda ? require('apollo-server-lambda') : require('apollo-server');

const { ApolloGateway, RemoteGraphQLDataSource } = require("@apollo/gateway");

const gateway = new ApolloGateway({
  serviceList: [
    { name: 'service1', url: !isLambda ? 'http://127.0.0.1:5090' : 'https://api.blah.com/search' },
    { name: 'service2', url: !isLambda ? 'http://127.0.0.1:5110' : 'https://api.elsewhere.com/other' },
 ],
});

const server = new ApolloServer({
  gateway,
  subscriptions: false,
  uploads: false,
  context: ({ event, context }) => ({
    headers: event.headers,
    functionName: context.functionName,
    event,
    context,
  }),
  playground: true,
  introspection: true,
});

if (!isLambda) {
    server.listen().then(({ url }) => {
      console.log(` Server ready at ${url}`);
    });
} else {
    exports.graphql = server.createHandler({
      cors: {
        origin: '*',
        credentials: true,
      },
    });
}

The NPM modules I'm using with this are:

npm install  @apollo/gateway apollo-server-lambda graphql

Any pointers on what might be going wrong here?

Update 25th May 2020
It seems to be related to whether I choose between HTTP or REST in AWS Gateway, HTTP gets me past this error, but I've no idea what I need to do to make it work in REST

Thanks

Chris


问:
To count unique digits in a given number N in java
Given a number N, for example, take 1091, here the count of digits is 4 but the count of unique digits is 3 i.e. 1, 0 & 9 are unique (since 1 is repeated).

I have tried breaking the number into individual digits and adding it to ArrayList and later converting it to an array. Then, iterating through the array and increasing the count of unique digits by 1 every time I got a unique digit in the array, But I have not got the required output. Kindly someone help in finding the unique digits count in a given number in Java.

import java.util.ArrayList;

public class UniqueDigits {
    static int uniqueDigitCount(int n) {
        ArrayList<Integer> ar = new ArrayList<>();
        int temp = n;
        int count = 1;
        do {
            ar.add(temp % 10);
            temp /= 10;
        }
        while (temp > 0);
        Integer[] arr = new Integer[ar.size()];
        arr = ar.toArray(arr);
        if (arr.length > 0) {
            for (int i = 0; i < arr.length - 1; i++) {
                if (arr[i] != arr[i + 1]) {

                    count++;
                }
            }
            return count;
        } else {
            return 0;
        }
    }

    public static void main(String[] args) {
        System.out.println(uniqueDigitCount(1091));
    }
}
```

答:
This could be done with a set. A set is a collection of unique elements. Putting all characters (digits) into a set will result in the duplicates being discarded. Its size() will then return the distinct elements.

Using streams:

int number = 1091;
long uniques = String.valueOf(number).chars()
    .mapToObj(c -> c)
    .collect(Collectors.toSet())
    .size();
```

<p>Or leveraging a count on the stream:</p>

<pre class="lang-java prettyprint-override"><code>String.valueOf(number).chars()
    .distinct()
    .count();
</code>```

Body:
This could be done with a set. A set is a collection of unique elements. Putting all characters (digits) into a set will result in the duplicates being discarded. Its size() will then return the distinct elements.

Using streams:

int number = 1091;
long uniques = String.valueOf(number).chars()
    .mapToObj(c -> c)
    .collect(Collectors.toSet())
    .size();

Or leveraging a count on the stream:

String.valueOf(number).chars()
    .distinct()
    .count();


问:
"Couldn't find <object> without an ID"
I'm having problems implementing a kind of comments form, where comments (called "microposts") belong_to both users and posts, users have_many comments, and posts (called "propositions") have_many comments.

My code for the comments form is:

```<code><%= form_for @micropost do |f| %>
  <div class="field">
      <%= f.text_area :content %>
  </div>

  <div class="actions">
    <%= f.submit "Submit" %>
  </div>
<% end %>
</code>```

The MicropostsController has this in the create action:

```<code>  def create

      @proposition = Proposition.find(params[:proposition_id])

  @micropost = current_user.microposts.build(params[:micropost])
  @micropost.proposition = @proposition
  if @micropost.save
      flash[:success] = "Contribution submitted"
      redirect_to root_path
  else
          @feed_items = []
      render 'pages/home'
  end
  end
</code>```

The form for creating a new micropost is on the same page as a proposition, yet the proposition id doesn't seem to get passed at any point.

This is the error I get on submitting the micropost form:

ActiveRecord::RecordNotFound in
  MicropostsController#create

Couldn't find Proposition without an
  ID

Parameters are:

{"commit"=>"Submit",
  "micropost"=>{"proposition_id"=>"",
  "content"=>"First comment"},
  "authenticity_token"=>"TD6kZaHv3CPWM7xLzibEbaLJHI0Uw43H+pq88HLZFjc=",
  "utf8"=>"âœ“"}

I'm completely new to rails and very new to coding anything at all, so I'd be grateful for any help you can give me!

Thanks in advance.

答:
Your params are:

```<code>"micropost"=>{"proposition_id"=>"", "content"=>"First comment"}
</code>```

So to get proposition_id, you have to do :

```<code>params[:micropost][:proposition_id]
</code>```

But this is empty. And there is nowhere else to get this id, that's why this line retrieves nil:

```<code>@proposition = Proposition.find(params[:proposition_id])
</code>```

Making this fail:

```<code>@micropost.proposition = @proposition
</code>```

You must either:

add the proposition_id as an hidden_field

store it in session

But I don't know your context enough to give you the proper solution here.

EDIT:

In your link, replace:

```<code><%= f.hidden_field :proposition_id %>
</code>```

with:

```<code><%= f.hidden_field :proposition_id, :value => @proposition.id %>
</code>```

If it doesn't work, show your params.

Note: it's bad practice to rely on instance variables, you should send local variable to each partial

ContentLicense: CC BY-SA 3.0

Title: "Couldn't find <object> without an ID"

Body:
I'm having problems implementing a kind of comments form, where comments (called "microposts") belong_to both users and posts, users have_many comments, and posts (called "propositions") have_many comments.

My code for the comments form is:

<%= form_for @micropost do |f| %>

      <%= f.text_area :content %>

    <%= f.submit "Submit" %>

<% end %>

The MicropostsController has this in the create action:

  def create

      @proposition = Proposition.find(params[:proposition_id])

  @micropost = current_user.microposts.build(params[:micropost])
  @micropost.proposition = @proposition
  if @micropost.save
      flash[:success] = "Contribution submitted"
      redirect_to root_path
  else
          @feed_items = []
      render 'pages/home'
  end
  end

The form for creating a new micropost is on the same page as a proposition, yet the proposition id doesn't seem to get passed at any point.

This is the error I get on submitting the micropost form:

ActiveRecord::RecordNotFound in
  MicropostsController#create

Couldn't find Proposition without an
  ID

Parameters are:

{"commit"=>"Submit",
  "micropost"=>{"proposition_id"=>"",
  "content"=>"First comment"},
  "authenticity_token"=>"TD6kZaHv3CPWM7xLzibEbaLJHI0Uw43H+pq88HLZFjc=",
  "utf8"=>"âœ“"}

I'm completely new to rails and very new to coding anything at all, so I'd be grateful for any help you can give me!

Thanks in advance.

Body:
Your params are:

"micropost"=>{"proposition_id"=>"", "content"=>"First comment"}

So to get proposition_id, you have to do :

params[:micropost][:proposition_id]

But this is empty. And there is nowhere else to get this id, that's why this line retrieves nil:

@proposition = Proposition.find(params[:proposition_id])

Making this fail:

@micropost.proposition = @proposition

You must either:

add the proposition_id as an hidden_field

store it in session

But I don't know your context enough to give you the proper solution here.

EDIT:

In your link, replace:

<%= f.hidden_field :proposition_id %>

with:

<%= f.hidden_field :proposition_id, :value => @proposition.id %>

If it doesn't work, show your params.

Note: it's bad practice to rely on instance variables, you should send local variable to each partial