tblyler/etch
1
0
Fork 0
mirror of https://github.com/LukasJoswiak/etch.git synced 2024-05-16 21:28:31 -04:00
Code Issues Projects Releases Wiki Activity

add a hover effect for the profile image (hardcoded in CSS, unfortunately)

Browse source
This commit is contained in:
acarril 2023-05-01 19:45:28 -04:00
parent 391ecb299d
commit 5918390fe0
2 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/css/main.css
View file

@ -348,3 +348,21 @@ main#content .profile-image {
top: 5%;
left: 10%;
}
.image-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/img/broccoli.jpg');
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.3s;
}
.image-wrapper:hover::before {
opacity: 1;
}

6
layouts/index.html
View file

@ -11,8 +11,10 @@
{{ .Content }}
</div>
<div class="image-content image-accent">
<img src="{{ "img/09_headshot.jpg" | absURL }}" alt="Your Name" class="profile-image">
</div>
<div class="image-wrapper">
<img src="{{ "img/09_headshot.jpg" | absURL }}" alt="Your Name" class="profile-image">
</div>
</div>
</div>
</article>
{{ end }}