The opacity()
function changes how visible elements are. The lower the opacity, the less visible an image becomes.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Filter-shop</h3>
<p>Opacity filter added</p>
<img src="https://mimo.app/i/nacho.png">
</body>
img {
filter: opacity(50%);
}
Opacity means not see-through, setting it to 100%
makes it visible.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Filter-shop</h3>
<p>Ghost filter added</p>
<img src="https://mimo.app/i/ghost.png">
</body>
img {
filter: opacity(100%);
width: 150px;
}