use opacity filter
This commit is contained in:
parent
8b268f835a
commit
e810c3eb08
2 changed files with 4 additions and 5 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue