✨ feat: add 2 interactive image shortcodes
- `image_hover` changes image on mouse hover. - `image_toggler` swaps image on click.
This commit is contained in:
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;
|
||||
}
|
Reference in New Issue
Block a user