问:
How to activate my javascript function with a paragraph on top of image
I had a working function in Javascipt. When you clicked on an image, the images would move to a different position and a large version of the image, as well as a paragraph, would show up on top. Then I added text over each image. I think it stopped working because you are technically no longer clicking on an image, but you are clicking on a paragraph. I tried to update the javascript code to reflect this, but had no success. I'm still trying to accomplish the same goal, but while having the text stay over the image as they are animated. Let me know if you think you know how to solve this, or if you need more info. I'm new to programming so any help would be useful. Thank you so much. (you may have to scroll to the right to see some of the images) https://jsfiddle.net/xfk3rh8b/

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;
}
.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0;
  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;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  transition-duration: .6s;
  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;
    padding-bottom: 300px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
    padding-bottom: 300px;
  }
}
@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

```

答:
EDIT: Removed the z-index and added a pointer-event: none to the .column p in css...

MDN Documentation on point events: The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

.column p {
  pointer-events: none;
}
```

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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';
}</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;
}
.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0;
  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;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  transition-duration: .6s;
  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;
    padding-bottom: 300px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
    padding-bottom: 300px;
  }
}
@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;
  }
}

.column p {
  pointer-events: none;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!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">
    Home
    Academics
    Projects
    Community Service
  </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 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>
</body>
</html></code>```

Body:
I had a working function in Javascipt. When you clicked on an image, the images would move to a different position and a large version of the image, as well as a paragraph, would show up on top. Then I added text over each image. I think it stopped working because you are technically no longer clicking on an image, but you are clicking on a paragraph. I tried to update the javascript code to reflect this, but had no success. I'm still trying to accomplish the same goal, but while having the text stay over the image as they are animated. Let me know if you think you know how to solve this, or if you need more info. I'm new to programming so any help would be useful. Thank you so much. (you may have to scroll to the right to see some of the images) https://jsfiddle.net/xfk3rh8b/

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;
}
.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0;
  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;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  transition-duration: .6s;
  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;
    padding-bottom: 300px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
    padding-bottom: 300px;
  }
}
@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

Body:
EDIT: Removed the z-index and added a pointer-event: none to the .column p in css...

MDN Documentation on point events: The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

.column p {
  pointer-events: none;
}

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;
}
.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: 0;
  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;
}

/* Style the images inside the grid */

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  transition-duration: .6s;
  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;
    padding-bottom: 300px;
  }
}
@keyframes animate9 {
  0% {
      top:00px;
  }
  100% {
    position:absolute;
    top: 800px;
    left:800px;
    padding-bottom: 300px;
  }
}
@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;
  }
}

.column p {
  pointer-events: none;
}

<!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 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>
</body>
</html>


来源: stackexchange

问:
Bootstrap Tabs Float Image Right
I've got a basic nav-tabs in Twitter Bootstrap and I've got an image after all of my tabs, that I'd like to float right. I've tried modifying its float, text-align, and other attributes, and even the pull-right class as mentioned on a separate but related SO question.

```<code><ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
    <a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
<!-- ... -->

<img class="pull-right text-right float-right" src="myimg.png" width="32px" height="32px">
</code>```

What Bootstrap class or CSS should I write to make my image float to the right?

(Bootstrap 4 if that matters)

答:
```<code><nav class="navbar header navbar-light bg-dark" id="myHeader">
<div class="container">
<p class="">logo</p>
// from here you get all elements on right side
<ul class="list-inline">
<li class="list-inline-item">
<div class="frqst">
<button class="fas fa-users btn text-white"></button>
<div>
<ul class="list-group">
<li class="border-bottom">
<p>first right item
</p>
</li>
</ul>
</div>
</div>
</li>
<li class="list-inline-item">
<button class="fas fa-comment btn text-white">second right item</button>
</li>
<li class="list-inline-item">
<p>third right item</p>
</li>
<li class="list-inline-item">
<img src="../../myimg.jpg">
</li>
<li class="list-inline-item">
<a class="text-white" href="./models/logout.html">Logout</a>
</li>
</ul>
</div>
</nav>
</code>```

ContentLicense: CC BY-SA 4.0

Title: Bootstrap Tabs Float Image Right

Body:
I've got a basic nav-tabs in Twitter Bootstrap and I've got an image after all of my tabs, that I'd like to float right. I've tried modifying its float, text-align, and other attributes, and even the pull-right class as mentioned on a separate but related SO question.

    Stuff

What Bootstrap class or CSS should I write to make my image float to the right?

(Bootstrap 4 if that matters)


问:
How to replace incorrectly unescaped double quotes in json string
I have json string which has double quotes in one of the value are not escaped.

Can any one please help me to identify it and escape. here is the example.

```<code>String s="{\"name\":\"son"o"o\",\"salary\":600000.0,\"age\":27}";
</code>```

I want to escape the double quotes surrounded by "o".

答:
In JSON, double quotes need to be escaped with a backspace (\"), so the correct sequence is:

```<code>String s = "{\"name\":\"son\\\"o\\\"o\",\"salary\":600000.0,\"age\":27}";
</code>```

Here we have:

\\ to insert a backspace

\" to insert a double quote

This results in the following JSON output:

```<code>{"name":"son\"o\"o","salary":600000.0,"age":27}
</code>```

Body:
I have json string which has double quotes in one of the value are not escaped.

Can any one please help me to identify it and escape. here is the example.

String s="{\"name\":\"son"o"o\",\"salary\":600000.0,\"age\":27}";

I want to escape the double quotes surrounded by "o".

Body:
In JSON, double quotes need to be escaped with a backspace (\"), so the correct sequence is:

String s = "{\"name\":\"son\\\"o\\\"o\",\"salary\":600000.0,\"age\":27}";

Here we have:

\\ to insert a backspace

\" to insert a double quote

This results in the following JSON output:

{"name":"son\"o\"o","salary":600000.0,"age":27}


问:
implode() generated string inserting only first element of the array
I am trying to insert array into database but it only insert first element of the array

This is my input field

```<code><input required="true" name="aprice[]" type="text">
</code>```

and receiving on another page in post

```<code>$aprice= implode(",",$_POST['aprice']);
</code>```

This is my insert query

```<code> $stmt = $conn->prepare("INSERT INTO `products` (`aprice`) VALUES (?)");
 $stmt->bind_param("s", $aprice);
 $stmt->execute();
</code>```

Here if I entered 1,2,3 then it will insert only 1 in database

I tried

Here I trying to implode whole array into a string like '1,2,3'

```<code>$aprice= " ' ".implode(",",$_POST['aprice'])." ' ";
</code>```

another way

```<code>'['.implode(",",$_POST['aprice']).']';
</code>```

But both are not working

答:
I achieve this by simply changing type int to varchar in phpmyadmin and with the following code:

```<code>$aprice= implode(",",$_POST['aprice']);
$stmt = $conn->prepare("INSERT INTO `products` (`aprice`) VALUES (?)");
$stmt->bind_param("s", $aprice);
$stmt->execute();
</code>```

Body:
I am trying to insert array into database but it only insert first element of the array

This is my input field

<input required="true" name="aprice[]" type="text">

and receiving on another page in post

$aprice= implode(",",$_POST['aprice']);

This is my insert query

 $stmt = $conn->prepare("INSERT INTO `products` (`aprice`) VALUES (?)");
 $stmt->bind_param("s", $aprice);
 $stmt->execute();

Here if I entered 1,2,3 then it will insert only 1 in database

I tried

Here I trying to implode whole array into a string like '1,2,3'

$aprice= " ' ".implode(",",$_POST['aprice'])." ' ";

another way

'['.implode(",",$_POST['aprice']).']';

But both are not working

Body:
I achieve this by simply changing type int to varchar in phpmyadmin and with the following code:

$aprice= implode(",",$_POST['aprice']);
$stmt = $conn->prepare("INSERT INTO `products` (`aprice`) VALUES (?)");
$stmt->bind_param("s", $aprice);
$stmt->execute();


问:
Counting with python dictionaries and adding functionality
```<code> a = 0
 b = 0
 c = 0
 d = 0

fruit = {
'lemons': [],
'apples': [],
'cherries': [],
'oranges': [],
 }

def count():
    fruit = input("What fruit are you getting at the store? ")
    if fruit == 'lemons':
        fruit['lemons'] = a + 1
    elif fruit == 'apples':
                fruit['apples'] = b + 1
    elif fruit == 'cherries':
                fruit['cherries'] = c + 1

    elif fruit == 'oranges':
                fruit['oranges'] = d + 1
    else: ????
</code>```

Hey, I'm trying to do two things here: 1) count how many occurrences of a certain word (in this case, certain types of fruit), appear in a document- which I am attempting to simulate here with a simple input function. I know it's not perfect, but I can't figure out how to make each occurrence increase the value for the appropriate key incrementally. For instance, if I call this function twice and type "lemons", the count should be 2, but it remains 1. In other words, my function is a lemon, but I don't know why.

The last thing I am having trouble with is the else function. 2 ) My program will be looking in pre-defined sections of a document, and I would like my else function to create a key: value pair in the dictionary if the existing key does not exist. For instance, if my program encounters the word 'banana', I would like to add the k:v pair { 'banana': [] } to the current dictionary so I can start counting those occurrences. But it seems like this would require me to not only add the k:v pair to the dictionary (which I don't rightly know how to do), but to add a function and variable to count the occurrences like the other k:v pairs.

Does this entire set up make sense for what I'm trying to do? Please help.

答:
You seem to have multiple variables called fruit, that's a bad idea. And if you're just counting, you should start with 0, not []. You can write your code way easier as:

```<code>import collections
result = collections.defaultdict(int)
def count():
    fruit = input("What fruit are you getting at the store? ")
    result[fruit] += 1
</code>```

In Python 3.1+, you should use collections.Counter instead of collections.defaultdict(int). If you don't want to use the collections module at all, you could also write out the defaultdict functionality:

```<code>result = {}
def count():
    fruit = input("What fruit are you getting at the store? ")
    if fruit not in result:
        result[fruit] = 0 # Create a new entry in the dictionary. 0 == int()
    result[fruit] += 1
</code>```

ContentLicense: CC BY-SA 3.0

Body:
 a = 0
 b = 0
 c = 0
 d = 0

fruit = {
'lemons': [],
'apples': [],
'cherries': [],
'oranges': [],
 }

def count():
    fruit = input("What fruit are you getting at the store? ")
    if fruit == 'lemons':
        fruit['lemons'] = a + 1
    elif fruit == 'apples':
                fruit['apples'] = b + 1
    elif fruit == 'cherries':
                fruit['cherries'] = c + 1

    elif fruit == 'oranges':
                fruit['oranges'] = d + 1
    else: ????

Hey, I'm trying to do two things here: 1) count how many occurrences of a certain word (in this case, certain types of fruit), appear in a document- which I am attempting to simulate here with a simple input function. I know it's not perfect, but I can't figure out how to make each occurrence increase the value for the appropriate key incrementally. For instance, if I call this function twice and type "lemons", the count should be 2, but it remains 1. In other words, my function is a lemon, but I don't know why.

The last thing I am having trouble with is the else function. 2 ) My program will be looking in pre-defined sections of a document, and I would like my else function to create a key: value pair in the dictionary if the existing key does not exist. For instance, if my program encounters the word 'banana', I would like to add the k:v pair { 'banana': [] } to the current dictionary so I can start counting those occurrences. But it seems like this would require me to not only add the k:v pair to the dictionary (which I don't rightly know how to do), but to add a function and variable to count the occurrences like the other k:v pairs.

Does this entire set up make sense for what I'm trying to do? Please help.

Body:
You seem to have multiple variables called fruit, that's a bad idea. And if you're just counting, you should start with 0, not []. You can write your code way easier as:

import collections
result = collections.defaultdict(int)
def count():
    fruit = input("What fruit are you getting at the store? ")
    result[fruit] += 1

In Python 3.1+, you should use collections.Counter instead of collections.defaultdict(int). If you don't want to use the collections module at all, you could also write out the defaultdict functionality:

result = {}
def count():
    fruit = input("What fruit are you getting at the store? ")
    if fruit not in result:
        result[fruit] = 0 # Create a new entry in the dictionary. 0 == int()
    result[fruit] += 1