add emails to people, add hover over image

Author: clewis7

index.html

@@ -26,11 +26,26 @@
           <h1>fastplotlib for neuroscience</h1>
         </header>
 
-        <div class="quad">
-          <img src="/images/fpl.jpg" alt="ephys" />
-          <img src="/images/fpl.jpg" alt="ophys" />
-          <img src="/images/fpl.jpg" alt="tracking" />
-          <img src="/images/fpl.jpg" alt="pathology" />
+        <div class="grid">
+          <div class="grid-item">
+            <img src="/images/fpl.jpg" alt="ephys" />
+            <div class="overlay">Description for Image 1</div>
+          </div>
+
+          <div class="grid-item">
+            <img src="/images/fpl.jpg" alt="ophys" />
+            <div class="overlay">Description for Image 2</div>
+          </div>
+
+          <div class="grid-item">
+            <img src="/images/fpl.jpg" alt="tracking" />
+            <div class="overlay">Description for Image 3</div>
+          </div>
+
+          <div class="grid-item">
+            <img src="/images/fpl.jpg" alt="pathology" />
+            <div class="overlay">Description for Image 4</div>
+          </div>
         </div>
 
         <p class="quad-text">

people.html

@@ -27,16 +27,19 @@
             <p class="caption">
               <b>Kushal Kolar</b> <br />
               PhD Candidate <br />
-              NYU Williams Lab
+              NYU Williams Lab <br />
+              <a href="mailto:kushal@fastplotlib.org">kushal@fastplotlib.org</a>
             </p>
           </div>
-
           <div class="image-item">
             <img src="images/caitlin.jpg" alt="Image 2" />
             <p class="caption">
               <b>Caitlin Lewis</b> <br />
               PhD Student <br />
-              Duke Pearson Lab
+              Duke Pearson Lab <br />
+              <a href="mailto:caitlin@fastplotlib.org"
+                >caitlin@fastplotlib.org</a
+              >
             </p>
           </div>
         </div>

style.css

@@ -101,7 +101,7 @@ main .title {
 }
 
 /* Quad images */
-main .quad {
+main .grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-auto-rows: auto;
@@ -111,11 +111,39 @@ main .quad {
   margin: 0 auto;
 }
 
-main .quad img {
+.grid-item {
+  position: relative;
+  overflow: hidden;
+}
+
+.grid-item img {
   width: 100%;
-  height: auto;
-  display: block;
+  height: 100%;
   object-fit: cover;
+  display: block;
+}
+
+/* Overlay text */
+.overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  color: black;
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  text-align: left;
+  padding: 12px;
+
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  font-size: 1.5rem;
+  font-family: "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Show overlay on hover */
+.grid-item:hover .overlay {
+  opacity: 1;
 }
 
 /* Homepage Description */