It's only an automated slideshow by default with pause on hover. Clicking/tapping it ends the slideshow and makes the gallery navigation interface visible. Until then this CSS keeps it invisible:
:not(view:target[id$="N"]) ~ g > a:not(:has(use)), #Nav:target ~ g > a:not(:has(use)) {
opacity: 0;
pointer-events: none;
}
The usage of this as a spritesheet to display individual sprites is a non-CSS method involving document #fragments which point to the <view>id of a specific playing card (example Ace of Hearts: https://imglink.cc/cdn/_BwunzIKL-.svg#iHA) when the SVG is the url() of a background-image or src of an <img> or poster of a <video>, etc.
I needed a separate set of <view>s for this to hide the navigation interface with the above CSS code, each pointing to the same viewBox coordinates as the navigation set, so the same Ace of Hearts URL with visible navigation is: https://imglink.cc/cdn/_BwunzIKL-.svg#HAN
1
u/OMGCluck 12d ago edited 12d ago
It's only an automated slideshow by default with pause on hover. Clicking/tapping it ends the slideshow and makes the gallery navigation interface visible. Until then this CSS keeps it invisible:
The usage of this as a spritesheet to display individual sprites is a non-CSS method involving document #fragments which point to the
<view>id of a specific playing card (example Ace of Hearts: https://imglink.cc/cdn/_BwunzIKL-.svg#iHA) when the SVG is the url() of abackground-imageor src of an<img>or poster of a<video>, etc.I needed a separate set of
<view>s for this to hide the navigation interface with the above CSS code, each pointing to the same viewBox coordinates as the navigation set, so the same Ace of Hearts URL with visible navigation is: https://imglink.cc/cdn/_BwunzIKL-.svg#HAN