问:
Can kernel based tile shader write to color attachment?
Based on an example in Metal shading language spec:

```<code>Example:
struct Foo {
    float4 a [[color(0)]];
    int4 b [[color(1)]];
};

kernel void
my_kernel(imageblock<Foo, imageblock_layout_implicit> img_blk,
 ushort2 lid [[thread_index_in_threadgroup]] …)
{
…
    Foo f = img_blk.read(lid); float4 r = f.a;
…
    f.a = r;
…
    img_blk.write(f, lid);
}
</code>```

As the members of the imageblock alias color attachment I think after "imgblk.write(...)" the imageblock will be written to corresponding color attachment.

I experimented this on Apple's example: Forward-plus with tile shading, I tried to use imageblock.write(..) to write to the color attachments in the tile shader but I got very weird results:

only pixels of the background are changed, but the result is too much darker than what I set, e.g. I set color=float4(1,0,0,1) but on screen it's float4(0.057, 0, 0, 1)

color of other parts strangely depends on whether/what is written to the imageblock in the previous fragment shader pass, consider I set the values in the imageblock to constants.

Anyway it feels like imageblock.write() doesn't work right in tile shader.
Or how to use it correctly?

答:
Solved, there are several things lead to the weird result I got:
1. The color format was srgb
2. The numSamples the example project used were 4
3. I did imageblock write without specifying imageblock_data_rate

In the case of multisampling, one needs to read/write the imageblock for each sample

Body:
Based on an example in Metal shading language spec:

Example:
struct Foo {
    float4 a [[color(0)]];
    int4 b [[color(1)]];
};

kernel void
my_kernel(imageblock<Foo, imageblock_layout_implicit> img_blk,
 ushort2 lid [[thread_index_in_threadgroup]] …)
{
…
    Foo f = img_blk.read(lid); float4 r = f.a;
…
    f.a = r;
…
    img_blk.write(f, lid);
}

As the members of the imageblock alias color attachment I think after "imgblk.write(...)" the imageblock will be written to corresponding color attachment.

I experimented this on Apple's example: Forward-plus with tile shading, I tried to use imageblock.write(..) to write to the color attachments in the tile shader but I got very weird results:

only pixels of the background are changed, but the result is too much darker than what I set, e.g. I set color=float4(1,0,0,1) but on screen it's float4(0.057, 0, 0, 1)

color of other parts strangely depends on whether/what is written to the imageblock in the previous fragment shader pass, consider I set the values in the imageblock to constants.

Anyway it feels like imageblock.write() doesn't work right in tile shader.
Or how to use it correctly?


来源: stackexchange

问:
how can i solved it org.apache.jasper.JasperException: /stud_add.jsp (line: 113, column: 119) Unterminated <form:option tag
```<code><form:select class="form-control" path="batch_id" id="genderOptions">
   <%for(BatchModel qt:batchlist){%>
     <form:option value='<%=qt!=null?qt.getBatch_id():""%>'     <%=studlist.getStud_id()!=0?studlist.getBatch_id().getBatch_id()==qt.getBatch_id()?"selected='selected'":"":"" %>/><%=qt.getBname()!=null?qt.getBname():"" %>
      <form:errors path="batch_id" cssClass="error" />
       <%--   <option value="<%=(String.valueOf(qt.getBatch_id())!=null)?qt.getBatch_id():""%>"><%=(String.valueOf(qt.getBname())!=null)?qt.getBname():""%></option>
       --%>
       <% } %>
    </form:select>
</code>```

答:
In your code, you have closed the <form:option/> tag incorrectly. Close it like :

```<code><form:select path="country">
   <form:option value="NONE" label="--- Select ---"/>
   <form:options items="${countryList}" />
</form:select>
</code>```

By providing the expression for setting the selected attribute tag , you are not properly closing the  . Try providing the selected value using an expression like what you have done for value attribute.Like :

```<code>selected="<%=studlist.getStud_id()!=0?studlist.getBatch_id().getBatch_id()==qt.getBatch_id()?"selected":"":"" %>"
</code>```

ContentLicense: CC BY-SA 4.0

Body:
In your code, you have closed the <form:option/> tag incorrectly. Close it like :

<form:select path="country">
   <form:option value="NONE" label="--- Select ---"/>
   <form:options items="${countryList}" />
</form:select>

By providing the expression for setting the selected attribute tag , you are not properly closing the  . Try providing the selected value using an expression like what you have done for value attribute.Like :

selected="<%=studlist.getStud_id()!=0?studlist.getBatch_id().getBatch_id()==qt.getBatch_id()?"selected":"":"" %>"


问:
How to have a CSS transition on an image return to the initial state after mouse removal with a text paragraph above the image
I'm trying to have my CSS transition, when you after you hover over one of the images and your mouse leaves, return to the position without the hover over a time period of .6 seconds. I've seen a couple of solutions to this problem, but they haven't worked due to the paragraph above each image. You can see some of these images if you scroll to the right, or click on one of the images to have a CSS animation occur. Let me know if you guys need any more information. I'm new to programming and would love any help. Thanks

var click = 0;
function checkClicks(imgs) {

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

 click = 1;
}
function myFunction(imgs) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Clear floats after the columns */

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

/* The expanding image container */

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

/* Expanding image text */

/* image paragraph */

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

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>

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

    <title>Projects</title>

    Home
    Academics
    Projects
    Community Service

this will be shown on the hover 1

this will be shown on the hover 2

this will be shown on the hover 3

this will be shown on the hover 4

this will be shown on the hover 5

this will be shown on the hover 6

this will be shown on the hover 7

this will be shown on the hover 8

this will be shown on the hover 9

      © 2020 By . Proudly Individually Coded.

```

答:
Need a transition ease-out with the duration on the non-hover css code... Check out my snippit and see if that does the trick

Edit: OP asked if a fade could be placed on his text that shows when hovering over an image. The text has pointer-events disabled to be able to click through to the image below so an event listener may not work. I have combined the two CSS selectors .column p into one selector and added transition: all .6s ease-out just below the opacity and top properties. This will add the transition to both the top and opacity after returning from hover state.

CSS:

```<code>.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  opacity: 0;
  transition: all .6s ease-out;
  margin: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.column:hover p {
  opacity: 1;
  top:-7px;
  transition: all .6s ease-out;
  height:100%;
 }
</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';
}
let target = document.querySelector('.column img');
target.addEventListener('mouseenter', () => document.querySelector('.column p').style.opacity = '0');```
<pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

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

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

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

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

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

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

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

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

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

.column {
  float: left;
  width: 25%;
  position: relative;
  background-color:#EEF0FC;
}

.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  opacity: 0;
  transition: all .6s ease-out;
  margin: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.column:hover p {
  opacity: 1;
  top:-7px;
  transition: all .6s ease-out;
  height:100%;
 }

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  vertical-align: bottom;
  transition: all .6s ease-out;
}

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

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

/* Clear floats after the columns */

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

/* The expanding image container */

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

/* Expanding image text */

/* image paragraph */

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

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>

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

    <title>Projects</title>

this will be shown on the hover 1

this will be shown on the hover 2

this will be shown on the hover 3

this will be shown on the hover 4

this will be shown on the hover 5

this will be shown on the hover 6

this will be shown on the hover 7

this will be shown on the hover 8

this will be shown on the hover 9

      © 2020 By . Proudly Individually Coded.

```

Body:
I'm trying to have my CSS transition, when you after you hover over one of the images and your mouse leaves, return to the position without the hover over a time period of .6 seconds. I've seen a couple of solutions to this problem, but they haven't worked due to the paragraph above each image. You can see some of these images if you scroll to the right, or click on one of the images to have a CSS animation occur. Let me know if you guys need any more information. I'm new to programming and would love any help. Thanks

var click = 0;
function checkClicks(imgs) {

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

 click = 1;
}
function myFunction(imgs) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Clear floats after the columns */

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

/* The expanding image container */

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

/* Expanding image text */

/* image paragraph */

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

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>

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

    <title>Projects</title>

    Home
    Academics
    Projects
    Community Service

this will be shown on the hover 1

this will be shown on the hover 2

this will be shown on the hover 3

this will be shown on the hover 4

this will be shown on the hover 5

this will be shown on the hover 6

this will be shown on the hover 7

this will be shown on the hover 8

this will be shown on the hover 9

      © 2020 By . Proudly Individually Coded.

Body:
Need a transition ease-out with the duration on the non-hover css code... Check out my snippit and see if that does the trick

Edit: OP asked if a fade could be placed on his text that shows when hovering over an image. The text has pointer-events disabled to be able to click through to the image below so an event listener may not work. I have combined the two CSS selectors .column p into one selector and added transition: all .6s ease-out just below the opacity and top properties. This will add the transition to both the top and opacity after returning from hover state.

CSS:

.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  opacity: 0;
  transition: all .6s ease-out;
  margin: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.column:hover p {
  opacity: 1;
  top:-7px;
  transition: all .6s ease-out;
  height:100%;
 }

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';
}
let target = document.querySelector('.column img');
target.addEventListener('mouseenter', () => document.querySelector('.column p').style.opacity = '0');

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

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

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

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

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

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

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

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

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

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

.column {
  float: left;
  width: 25%;
  position: relative;
  background-color:#EEF0FC;
}

.column p {
  position: absolute;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  opacity: 0;
  transition: all .6s ease-out;
  margin: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.column:hover p {
  opacity: 1;
  top:-7px;
  transition: all .6s ease-out;
  height:100%;
 }

.column img {
  cursor: pointer;
  background-color:black;
  position: relative;
  top: 0;
  vertical-align: bottom;
  transition: all .6s ease-out;
}

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

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

/* Clear floats after the columns */

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

/* The expanding image container */

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

/* Expanding image text */

/* image paragraph */

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

#expanded-wrapper {
  width: 100%;
}

/* Closable button inside the expanded image */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


问:
C++: What is the size of an object of an empty class?
I was wondering what could be the size of an object of an empty class. It surely could not be 0 bytes since it should be possible to reference and point to it like any other object. But, how big is such an object?

I used this small program:

```<code>#include <iostream>
using namespace std;

class Empty {};

int main()
{
    Empty e;
    cerr << sizeof(e) << endl;
    return 0;
}
</code>```

The output I got on both Visual C++ and Cygwin-g++ compilers was 1 byte! This was a little surprising to me since I was expecting it to be of the size of the machine word (32 bits or 4 bytes).

Can anyone explain why the size of 1 byte? Why not 4 bytes? Is this dependent on compiler or the machine too? Also, can someone give a more cogent reason for why an empty class object will not be of size 0 bytes?

答: Quoting Bjarne Stroustrup's C++ Style and Technique FAQ, the reason the size is non-zero is "To ensure that the addresses of two different objects will be different."  And the size can be 1 because alignment doesn't matter here, as there is nothing to actually look at.</p>

OwnerDisplayName: Ash

ContentLicense: CC BY-SA 2.5

Body:
I was wondering what could be the size of an object of an empty class. It surely could not be 0 bytes since it should be possible to reference and point to it like any other object. But, how big is such an object?

I used this small program:

#include <iostream>
using namespace std;

class Empty {};

int main()
{
    Empty e;
    cerr << sizeof(e) << endl;
    return 0;
}

The output I got on both Visual C++ and Cygwin-g++ compilers was 1 byte! This was a little surprising to me since I was expecting it to be of the size of the machine word (32 bits or 4 bytes).

Can anyone explain why the size of 1 byte? Why not 4 bytes? Is this dependent on compiler or the machine too? Also, can someone give a more cogent reason for why an empty class object will not be of size 0 bytes?

LastEditorDisplayName: Ash

OwnerDisplayName: Sol

ContentLicense: CC BY-SA 3.0