feat: add 2 interactive image shortcodes

- `image_hover` changes image on mouse hover.

- `image_toggler` swaps image on click.
This commit is contained in:
welpo
2023-08-09 18:36:45 +02:00
parent 42293b2868
commit 7ccd71736e
8 changed files with 150 additions and 4 deletions

View File

@@ -0,0 +1,21 @@
.image-hover-container {
position: relative;
display: inline-block;
width: 100%;
.image-default {
display: block;
}
.image-hovered {
display: none;
}
&:hover .image-hovered {
display: block;
}
&:hover .image-default {
display: none;
}
}

View File

@@ -0,0 +1,20 @@
.image-toggled {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.image-toggler-toggle {
display: none;
}
.image-toggler-toggle:checked ~ .image-label .image-toggled {
visibility: visible;
position: static;
}
.image-toggler-toggle:checked ~ .image-label .image-default {
visibility: hidden;
position: absolute;
}