<img src="https://picsum.photos/id/1069/400/400">
<img src="https://picsum.photos/id/1025/400/400">
$x:20; /* number of row */
$y:20; /* number of columns */
$s:0.8; /* speed factor */
@for $i from 0 through ($x - 1) {
@for $j from 0 through ($y - 1) {
@property --c-#{$i}-#{$j} {
syntax: "<number>";
initial-value: 1;
inherits: false;
}
}
}
@function transition($i,$j) {
@return ($s*random())+s ($s*random())+s;
}
@mixin image() {
$all_t: ();
$all_m: ();
@for $i from 0 through ($x - 1) {
@for $j from 0 through ($y - 1) {
$all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);
$all_m: append($all_m, linear-gradient(rgba(0,0,0,var(--c-#{$i}-#{$j})) 0 0) calc(#{$i}*100%/(#{$x} - 1)) calc(#{$j}*100%/(#{$y} - 1)), comma);
}
}
transition: $all_t;
-webkit-mask: $all_m;
mask: $all_m;
}
img {
@include image();
-webkit-mask-size:calc(100%/#{$x}) calc(100%/#{$y});
-webkit-mask-repeat:no-repeat;
mask-size:calc(100%/#{$x}) calc(100%/#{$y});
mask-repeat:no-repeat;
}
img:hover {
@for $i from 0 through ($x - 1) {
@for $j from 0 through ($y - 1) {
--c-#{$i}-#{$j}: 0;
}
}
}
body {
background:pink;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.