diff --git a/content/demo/index.md b/content/demo/index.md
index f51dd20..318737e 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -613,6 +613,8 @@ When set on an image:
+URL anchor `#spoiler` can be used for this as well.
+
With `solid` class:
```html
@@ -621,6 +623,8 @@ With `solid` class:
+URL anchor `#solid` can be used for this as well.
+
### Buttons Dialog
```html.j2
diff --git a/sass/_spoiler.scss b/sass/_spoiler.scss
index d380288..fcd63c7 100644
--- a/sass/_spoiler.scss
+++ b/sass/_spoiler.scss
@@ -1,4 +1,4 @@
-.spoiler {
+span.spoiler {
filter: blur(0.25rem);
transition: var(--transition);
@@ -21,11 +21,11 @@
}
}
-img.spoiler {
+img.spoiler,
+img[src*="#spoiler"] {
opacity: var(--disabled);
clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
filter: blur(1rem);
- transition: var(--transition-longer);
&:hover,
&:active {
@@ -34,11 +34,11 @@ img.spoiler {
filter: none;
}
- &.solid {
+ &.solid,
+ &[src*="#solid"] {
clip-path: none;
filter: brightness(0%);
box-shadow: none;
- border-radius: var(--rounded-corner);
&:hover,
&:active {