Change CSS value of other elements if one element is being hovered

I have a few social-media links displayed by .card box-elements. Now I want to make that if no .card is hovered, the opacity will just stay at 1 but if one .card is hovered, every card except for the one that’s actually being hovered, should now change its opacity to 0.7. My .cards just have the classes card socialsElement.

I’ve already tried this

.socialsElement.card:hover .card:not(:hover) {
    opacity: 0.5;
}

but doesn’t work

(Expectation)
If none is being hovered
If One card is being hovered
Live Preview

>Solution :

You’re almost there:

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin 1em;
  background: navy;
}

section:hover div {opacity:.7}

section:hover div:hover {opacity:1}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>