Rename --shine to --shimmer, make sure images are always on top when hovered

CHANGELOG.md

@@ -57,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `config.extra.fix_contrast_dark` should now work even if `config.extra.primary_color_dark` is not set.
 - Don't add `::before` pseudo element to color pickers.
+- Fix images being covered by other images in some scenarios.
 - Load auto-menu-close script if navbar sublinks are present.
 
 ## [4.8.0](https://codeberg.org/daudix/duckquill/compare/v4.7.1...v4.8.0)

sass/_comments.scss

@@ -38,8 +38,8 @@
 		margin-block-start: 2rem;
 
 		#load-comments {
-			--shine: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
-			background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shine) 75%, var(--fg-muted-1) 100%);
+			--shimmer: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
+			background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%);
 			background-size: 200%;
 			background-color: transparent;
 

sass/_media.scss

@@ -85,6 +85,7 @@ img {
 			z-index: 1;
 			box-shadow: var(--edge-highlight), var(--shadow-raised);
 			border-radius: 0;
+			position: relative;
 		}
 
 		&.start,

sass/_pre-container.scss

@@ -4,9 +4,9 @@
 	border-radius: var(--rounded-corner);
 
 	.header {
-		--shine: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
+		--shimmer: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2));
 		border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
-		background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shine) 75%, var(--fg-muted-1) 100%);
+		background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%);
 		background-size: 200%;
 		padding: 0.25rem;
 		height: 2.5rem;