diff --git a/content/demo/index.md b/content/demo/index.md index 4388a49..d93f942 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -195,7 +195,7 @@ Variables should be comma-separated and be inside the brackets. {{ image(url="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg", url_min="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg", alt="The gravestone of J.P.G.", no_hover=true) }}
Image with compressed version, an alt text, and without zoom on hover
-Alternatively, you can append the following url anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes. +Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes. - `#full`: Forces image/video to be full-width. - `#pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp. diff --git a/sass/_media.scss b/sass/_media.scss index 3e93c0f..661b6e5 100644 --- a/sass/_media.scss +++ b/sass/_media.scss @@ -1,17 +1,3 @@ -img { - transition: var(--transition-longer); - - &:not(.no-hover, &[src*="#no-hover"]) { - cursor: zoom-in; - - &:hover { - transform: scale(1.1); - box-shadow: var(--shadow-raised); - border-radius: 0; - } - } -} - img, video { display: block; @@ -34,9 +20,26 @@ video { &[src*="#transparent"] { box-shadow: none; border-radius: 0; + } +} + +img { + transition: var(--transition-longer); + + &:not(.no-hover, &[src*="#no-hover"]) { + cursor: zoom-in; &:hover { - box-shadow: none !important; + transform: scale(1.1); + box-shadow: var(--shadow-raised); + border-radius: 0; + } + + &.transparent, + &[src*="#transparent"] { + &:hover { + box-shadow: none; + } } } }