Trying to make an image opaque without affecting the border

Question

i have 4 thumbnail images that i want it to look like this.

Since when i added opacity to the first image, it also affected the border, i put the image inside a div, where that div would have the border. But it looks like this

How can i remove that blank space?

Here's the HTML

<article>
    <div class="thumbs">
        <div class="border"><img src="assets/image-product-1-thumbnail.jpg" alt="" id="thumb1"></div>
        <div><img src="assets/image-product-2-thumbnail.jpg" alt=""></div>
        <div><img src="assets/image-product-3-thumbnail.jpg" alt=""></div>
        <div><img src="assets/image-product-4-thumbnail.jpg" alt=""></div> 
    </div>
</article>

And here's the CSS

.thumbs img{
    width: 85px;
    border-radius: 12px;

}

.thumbs{
    width: 400px;
    margin-top: 20px;
    margin-left: 140px;
    display: flex;
    justify-content: space-between;
}

.border{
    border: 2px solid orange;
    border-radius: 12px;
}