Skip to content

Commit

Permalink
Update screenshot hover state
Browse files Browse the repository at this point in the history
  • Loading branch information
@dalyhabit
dalyhabit committed Dec 16, 2023
1 parent 6706cfd commit d8c7f6a
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 29 deletions.
49 changes: 26 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
13 changes: 7 additions & 6 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}

Expand All @@ -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 */
Expand Down

0 comments on commit d8c7f6a

Please sign in to comment.