radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add hover effect to 98.js.org link

main
Isaiah Odhner 2023-08-10 03:27:56 -04:00
parent 84a0b4b839
commit 174daecf8f
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
about.html
View File

@ -152,7 +152,7 @@
<img src="images/about/98.js.org.png" width="360" height="287" alt="windows swung open outwards"
style="position: absolute; left: 0; top: 0">
<img src="images/about/WindowCLR_WRK.gif" width="360" height="287" alt="windows swung open outwards"
style="position: absolute; left: 0; top: 0">
id="wooden-window-frame" style="position: absolute; left: 0; top: 0">
<img src="images/about/ENTERsolar.gif" width="128" height="45" alt="ENTER / 由此進入"
style="position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); mix-blend-mode: lighten">;
</a>

13
styles/about.css
View File

@ -15,4 +15,17 @@ body>* {
/* margin/padding on the body doesn't work */
margin-left: 10px;
margin-right: 10px;
}
#wooden-window-frame {
transition: transform 4s ease, box-shadow 5s ease;
}
a[href^="https://98.js.org"]:hover #wooden-window-frame,
a[href^="https://98.js.org"]:focus #wooden-window-frame {
transform: scale(1.2);
box-shadow:
0 0 5px 2px rgba(0, 43, 78, 0.5),
0 0 100px 50px rgba(100, 163, 214, 0.5);
}