use opacity filter

This commit is contained in:
Rhiannon Morris 2020-08-30 18:45:13 +02:00
parent 8b268f835a
commit e810c3eb08
2 changed files with 4 additions and 5 deletions

View file

@ -179,7 +179,7 @@ footer {
@media (hover) { @media (hover) {
.item:hover figcaption { .item:hover figcaption {
opacity: 20%; filter: opacity(20%);
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
@ -190,7 +190,7 @@ footer {
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.item figcaption { .item figcaption {
transition-property: opacity, transform; transition-property: filter, transform;
transition-duration: 0.25s; transition-duration: 0.25s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
} }

View file

@ -72,10 +72,9 @@ body {
border-radius: 0.5em; border-radius: 0.5em;
} }
@supports (filter: blur(50px)) { @supports (filter: opacity(65%) blur(50px)) {
#cw ~ * { #cw ~ * {
opacity: 65%; filter: opacity(65%) blur(50px);
filter: blur(50px);
} }
#cw { #cw {