image background opacity with no affecting borders - html

Question

How to set background with opacity without affecting border line opacity? Solutions I found does not help.
<div class="selected">
<img
src="../assets/img/image-product-1-thumbnail.jpg"
alt="product-1-thumbnail"
/>
</div>
img {
width: 100%;
max-width: 5rem;
height: auto;
border-radius: 10%;
}
.selected {
background-color: red;
img {
border: 2px solid red;
}
}

Answer 1

let thumbnailImages = document.querySelectorAll('.thumbnail');
thumbnailImages.forEach(image => {
image.addEventListener("mouseover", ()=> {
image.classList.add('blur')
image.parentElement.style.outline = "2px solid hsl(26, 100%, 55%)";
image.parentElement.style.borderRadius = "12px";
})
image.addEventListener("mouseout", ()=> {
image.classList.remove('blur')
image.parentElement.style.outline = "";
})
});
.left-section-bottom{
display: flex;
width: 80%;
margin: 32px auto;
gap: 40px;
}
.left-section-bottom img{
border-radius: 12px;
}
.thumbnail.blur{
opacity: 0.4;
cursor: pointer;
}
.thumbnail-div{
display: flex;
}
<div class="left-section-bottom">
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
<div class="thumbnail-div"><img class="thumbnail" src="images/image-product-1-thumbnail.jpg" alt=""></div>
</div>
I was looking for an answer to this same question, and finally figured it out. The original question is in regard to this challenge:
https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6
Since there are 4 images you have to loop through them one by one.
You have to use querySelectorAll, not querySelector.
Just loop through your thumbnail images with a forEach().
Wrap your images in a div (as Kingsly mentioned) so you can apply
border style to the div instead of your blurred images.
This code should work if you add your images.

Answer 2

You should put the image in a div container with the size you want. Add the border and border-radius to the div, add opacity to the img element.
IMAGE CREDIT: https://www.pexels.com/#belle-co-99483
.img-container {
width: 200px;
height: 150px;
border: 2px solid red;
border-radius: 10%;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
opacity: .7;
}
.selected {
//background-color: red;
}
img {
}
<div class="selected">
<div class="img-container">
<img
src="https://images.pexels.com/photos/1000445/pexels-photo-1000445.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="product-1-thumbnail"
/>
</div>
</div>