I want that when I hover the mouse over one item of the items, the opacity of my other items will be reduced to 0.5. How can I do it?

Question

I want that when I hover the mouse over one item of the items, the opacity of my other items will be reduced to 0.5. How can I do it?

.service-item {
    padding: 50px 30px 40px;
    border: 1px solid rgb(247, 241, 241);
    cursor: pointer;
    transition: all .4s;
}

.service-item:hover {
border: 1px solid rgb(247, 241, 241);
box-shadow: 0 10px 28px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.0);
}

Answer 1

You didn't provide your HTML, so I had to create my own. Hopefully you can extrapolate the below into your own code.

.services:hover .service-item:not(:hover) {
  opacity: .5;
}

.service-item {
  padding: 50px 30px 40px;
  border: 1px solid rgb(247, 241, 241);
  cursor: pointer;
  transition: all .4s;
}

.service-item:hover {
  border: 1px solid rgb(247, 241, 241);
  box-shadow: 0 10px 28px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.0);
}

<div class="services">
  <div class="service-item">Service #1</div>
  <div class="service-item">Service #2</div>
  <div class="service-item">Service #3</div>
</div>