Effet halftone :
<div class="cadre-demo">
<div class=canvas>
<img src="image.jpg" alt>
</div>
<div>
*,*::after,*::before{box-sizing:border-box}
.cadre-demo{
position:relative;
max-width: 960px;
margin:5rem auto;
aspect-ratio:3/2;
}
.canvas {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: filter .4s;
overflow: hidden;
}
.canvas:hover{
filter:contrast(800%)
}
.canvas::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
background: radial-gradient(circle at center, #383838, #fff);
background-size: 0.25rem 0.25rem;
transform: rotate(20deg);
}
.canvas img{
transition: filter .4s;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.canvas:hover img {
mix-blend-mode: hard-light;
filter: grayscale(1) brightness(80%) contrast(150%) blur(2px);
}
Effet noise (dither) :
<div class="cadre-demo">
<div class=canvas>
<img src="image.jpg" alt>
</div>
<div>
*,*::after,*::before{box-sizing:border-box}
.cadre-demo{
position:relative;
max-width: 960px;
margin:5rem auto;
aspect-ratio:3/2;
}
.canvas{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.canvas::before {
content: "";
position: absolute;
top: 0%;
left: 0%;
bottom: 0%;
right: 0%;
background-image: repeating-radial-gradient(circle at 17% 32%,
rgb(4, 4, 0),
rgb(52, 72, 197),
rgb(115, 252, 224),
rgb(116, 71, 5),
rgb(223, 46, 169),
rgb(0, 160, 56),
rgb(234, 255, 0) var(--a));
}
.canvas img {
transition: filter .4s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.canvas:hover::before{
--a: 0.0009px;
}
.canvas:hover img{
mix-blend-mode:hard-light;
filter: contrast(200%) brightness(150%) blur(2px);
}
