forked from deepStateMirrors/tabi
✨ feat: add 2 interactive image shortcodes
- `image_hover` changes image on mouse hover. - `image_toggler` swaps image on click.
This commit is contained in:
parent
42293b2868
commit
7ccd71736e
8 changed files with 150 additions and 4 deletions
21
sass/parts/_image-hover.scss
Normal file
21
sass/parts/_image-hover.scss
Normal 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;
|
||||
}
|
||||
}
|
20
sass/parts/_image-toggler.scss
Normal file
20
sass/parts/_image-toggler.scss
Normal 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;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue