i would like to do a specific mouse hovering effect in another div

Since 2 weeks, I have been working on a page where i used mouse hovering effect and i've created 3 mouse hovering image in my html and css, right now , i thought of a new effect that would be like a focus on the "hovered" object , for exemple:

If i hover div 1 , the opacity's page will be greatly reduced, mostly something where I add a background color with low "opacity effects".

The problem here Is that I can't figure out how to do that, I've tried

.college hover > body
{
background-color:black;
opacity: 0.5;
}

but it didn't work.

I would like also to know If I need to use javascript later? I've worked with it and i really don't know much on how it works .

.college .image {
  left: 100px;
  top: 475px;
  position: absolute
}

.college:hover .imagefirst {
  opacity: 0.2;
}

.college .imagesecond {
  width: 550px;
  height: 900px;
  transform: translate(-110px, 500px);
  transition: transform 0.5s ease-in-out 0.25s;
  border-radius: 8px;
  overflow: hidden;
}

.college:hover>.imagesecond {
  transform: translate(-110px, -500px);
}

.college:hover>body {
  background-color: black
}

.lycee .image {
  left: 700px;
  top: 500px;
  position: absolute
}

.lycee .imagefourth {
  width: 537px;
  height: 600px;
  transform: translate(-160px, 500px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

.lycee:hover>.imagefourth {
  transform: translate(-160px, -325px);
}

.formations .image {
  left: 1250px;
  top: 510px;
  position: absolute;
}

.formations .imagesixth {
  width: 550px;
  height: 900px;
  transform: translate(-100px, 400px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden
}

.formations:hover>.imagesixth {
  transform: translate(-173px, -600px);
}

body {
  background: url("http://via.placeholder.com/350x150") 33em 0% fixed no-repeat;
  position: fixed;
  background-color: rgb(0, 85, 170);
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css.css" />

  <title> sainte marie </title>

</head>

<body>
  <div class="saintemarie">
    <a href="college/collegesaintemarie.html">
      <div class="college">
        <img class="image imagefirst" src="http://via.placeholder.com/350x150" />
        <img class="image imagesecond" src="http://via.placeholder.com/350x150" />
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <img class="image imagethird" src="http://via.placeholder.com/350x150" />
        <img class="image imagefourth" src="http://via.placeholder.com/350x150" />
      </div>
    </a>

    <a href="c&formation/c&fsaintemarie.html">
      <div class="formations">
        <img class="image imagefifth" src="http://via.placeholder.com/350x150" />
        <img class="image imagesixth" src="http://via.placeholder.com/350x150" />
      </div>
    </a>
  </div>


</body>

</html>

Solution

document.body.onload = function(){
   colleges = document.body.getElementsByClassName("college");

   for (var i = 0; i < colleges.length; i++) {
    colleges[i].addEventListener('mouseover', function(){
      document.body.style = "background-color: black"; //apply styles here
    });    
    colleges[i].addEventListener('mouseout', function(){
      document.body.style = ""; //revert changes
    });
  }
}

But if you're adding other inline css to the elements from another part in your code, you will have problems because when reverting the changes, all inline styles will be removed. With jQuery it's easier and a bit more error-proof.