CSS image opacity without affecting border

Question

I have a row of images and I want the first image to have a border, I want to reduce the opacity of the image but I want the border color to appear as the color that I have used for the border in my CSS without reduced opacity, is it possible to do that? I tried putting the border around the div but the images that I have to use have a transparent space at the bottom which makes the border look weird.

.images-div {
    display: flex;
    gap: 14px;
}

.image {
    border-radius: 11px;
}

/* This doesn't work 
.image-div {
    border-radius: 11px;
} */

.image-active {
    opacity: .5; 
    border: 3px solid rgb(0, 0, 255); /* This should be dark blue and not faded */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
    <div class="images-div">
        <div class="image-div">
            <img class="image image-active" src="https://i.imgur.com/EcTLpGs.jpg" "alt="">
        </div>  
        <img class="image" src="https://i.imgur.com/EcTLpGs.jpg" "alt="">
        <img class="image" src="https://i.imgur.com/EcTLpGs.jpg" "alt="">
        <img class="image" src="https://i.imgur.com/EcTLpGs.jpg" "alt="">
    </div> 
</body>
</html>

Does this answer your question? [image background opacity with no affecting borders](https://stackoverflow.com/questions/70122742/image-background-opacity-with-no-affecting-borders) — francisco, Jan 02 '23 at 15:37
the weird space you get using an extra div can be fixed following the first duplicate — Temani Afif, Jan 02 '23 at 15:42

CSS image opacity without affecting border

0 Answers0