From d8c7f6af224bbe3c12a2214dfa40f2e66751b4aa Mon Sep 17 00:00:00 2001
From: Patrick Daly <dalyhabit@gmail.com>
Date: Fri, 15 Dec 2023 21:43:12 -0600
Subject: [PATCH] Update screenshot hover state

---
 index.html | 49 ++++++++++++++++++++++++++-----------------------
 style.css  | 13 +++++++------
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index b8307da..cf42676 100755
--- a/index.html
+++ b/index.html
@@ -75,7 +75,7 @@ <h3 class="professional-portfolio-header">Professional Experience</h3>
 								<source class="company-logo" srcset="resources/images/spredfast-logo.webp" type="image/webp">
 								<img class="company-logo" src="resources/images/spredfast-logo.png" alt="spredfast-logo">
 							</picture>
-							<div class="logo-overlay">
+							<div class="overlay">
 								<a target="_blank" href="https://login.spredfast.com" aria-label="view project"><button class="visit-website-button">View Project</button></a>
 							</div>
 						</div>
@@ -87,7 +87,7 @@ <h3 class="professional-portfolio-header">Professional Experience</h3>
 								<source class="company-logo" srcset="resources/images/khoros-logo.webp" type="image/webp">
 								<img class="company-logo" src="resources/images/khoros-logo.png" alt="khoros-logo">
 							</picture>
-							<div class="logo-overlay">
+							<div class="overlay">
 								<a target="_blank" href="https://shared-ui.qa.app.khoros.com" aria-label="view project"><button class="visit-website-button">View Project</button></a>
 							</div>
 						</div>
@@ -107,13 +107,14 @@ <h3 class="personal-portfolio-header">Personal Projects</h3>
 				<div class="portfolio-flex">
 					<div class="col span-1-of-3 box portfolio-col">
 						<div class="screenshot-container">
-							<a class="image-link" target="_blank" href="https://github.com/dalyhabit/dalyhabit.github.io" aria-label="patrickdaly.us">
-								<picture>
-									<source class="screenshot" srcset="resources/images/patrickdaly.us.jp2" type="image/jp2">
-									<source class="screenshot" srcset="resources/images/patrickdaly.us.webp" type="image/webp">
-									<img class="screenshot" src="resources/images/patrickdaly.us.png" alt="patrickdaly.us">
-								</picture>
-							</a>
+							<picture>
+								<source class="screenshot" srcset="resources/images/patrickdaly.us.jp2" type="image/jp2">
+								<source class="screenshot" srcset="resources/images/patrickdaly.us.webp" type="image/webp">
+								<img class="screenshot" src="resources/images/patrickdaly.us.png" alt="patrickdaly.us">
+							</picture>
+							<div class="overlay">
+								<a target="_blank" href="https://github.com/dalyhabit/dalyhabit.github.io" aria-label="view project"><button class="visit-website-button">View Project</button></a>
+							</div>
 						</div>
 						<a target="_blank" href="https://github.com/dalyhabit/dalyhabit.github.io" aria-label="patrickdaly.us">
 							<h3>patrickdaly.us</h3>
@@ -122,13 +123,14 @@ <h3>patrickdaly.us</h3>
 					</div>
 					<div class="col span-1-of-3 box portfolio-col">
 						<div class="screenshot-container">
-							<a class="image-link" target="_blank" href="https://www.corporate-quarters.com" aria-label="corporate-quarters.com">
-								<picture>
-									<source class="screenshot" srcset="resources/images/corporate-quarters.jp2" type="image/jp2">
-									<source class="screenshot" srcset="resources/images/corporate-quarters.webp" type="image/webp">
-									<img class="screenshot" src="resources/images/corporate-quarters.png" alt="corporate-quarters.com">
-								</picture>
-							</a>
+							<picture>
+								<source class="screenshot" srcset="resources/images/corporate-quarters.jp2" type="image/jp2">
+								<source class="screenshot" srcset="resources/images/corporate-quarters.webp" type="image/webp">
+								<img class="screenshot" src="resources/images/corporate-quarters.png" alt="corporate-quarters.com">
+							</picture>
+							<div class="overlay">
+								<a target="_blank" href="https://www.corporate-quarters.com" aria-label="view project"><button class="visit-website-button">View Project</button></a>
+							</div>
 						</div>
 						<a target="_blank" href="https://www.corporate-quarters.com" aria-label="corporate-quarters.com">
 							<h3>corporate-quarters.com</h3>
@@ -137,13 +139,14 @@ <h3>corporate-quarters.com</h3>
 					</div>
 					<div class="col span-1-of-3 box portfolio-col">
 						<div class="screenshot-container">
-							<a class="image-link" target="_blank" href="http://www.greenbelter.io" aria-label="greenbelter.io">
-								<picture>
-									<source class="screenshot" srcset="resources/images/greenbelter.io.jp2" type="image/jp2">
-									<source class="screenshot" srcset="resources/images/greenbelter.io.webp" type="image/webp">
-									<img class="screenshot" src="resources/images/greenbelter.io.png" alt="greenbelter.io">
-								</picture>
-							</a>
+							<picture>
+								<source class="screenshot" srcset="resources/images/greenbelter.io.jp2" type="image/jp2">
+								<source class="screenshot" srcset="resources/images/greenbelter.io.webp" type="image/webp">
+								<img class="screenshot" src="resources/images/greenbelter.io.png" alt="greenbelter.io">
+							</picture>
+							<div class="overlay">
+								<a target="_blank" href="http://www.greenbelter.io" aria-label="view project"><button class="visit-website-button">View Project</button></a>
+							</div>
 						</div>
 						<a target="_blank" href="http://www.greenbelter.io" aria-label="greenbelter.io">
 							<h3>greenbelter.io</h3>
diff --git a/style.css b/style.css
index 4ea1201..a05011a 100755
--- a/style.css
+++ b/style.css
@@ -99,18 +99,18 @@ img.company-logo {
 
 .screenshot-container,
 .logo-container {
+	position: relative;
 	text-align: center;
 }
 
 .logo-container {
-	position: relative;
 	display: flex;
     min-height: 125px;
     justify-content: center;
     align-items: center;
 }
 
-.logo-overlay {
+.overlay {
 	position: absolute;
 	display: flex;
 	align-items: center;
@@ -121,14 +121,15 @@ img.company-logo {
 	right: 0;
 	height: 100%;
 	width: 100%;
-	border-radius: 20px;
+	box-shadow: none;
 	color: white;
 	opacity: 0;
 	transition: .4s linear;
 	background-color: white;
 }
 
-.logo-container:hover .logo-overlay {
+.logo-container:hover .overlay,
+.screenshot-container:hover .overlay {
 	opacity: 1;
 }
 
@@ -152,8 +153,8 @@ img.screenshot {
 	transition: .5s ease;
 }
 
-.image-link:hover .screenshot {
-	box-shadow: 0 4px 8px 0 rgba(167, 102, 42, 0.2), 0 6px 20px 0 rgba(167, 102, 42, 0.19);
+.screenshot-container:hover .screenshot {
+	box-shadow: none;
 }
 
 /* NAVIGATION */