problems with mouse hovering on a whole page

Since last week I've been creating an HTML site, and I've been using mouse hovering to make image move when your cursor hover on a hyperlink, so everything seems fine and I mostly finished it but there is something that I quite don't understand, I've created 3 hyperlink with 3 mouse hovering images, but the last one actually hovers on the whole page of the site.

I have no idea why or where it does that so that is why I'm here to ask you this question. You can take a look at my html:

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

.college .imagesecond {
  transform: translate(0px, 500px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

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

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

.lycee .imagefourth {
  transform: translate(0px, 300px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

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

.formations .image {
  margin-left: 1250px;
  margin-top: 510px;
  overflow: hidden;
}

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

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

body {
  background: url("http://via.placeholder.com/571x179") 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/196x175" />
        <img class="image imagesecond" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <img class="image imagethird" src="http://via.placeholder.com/183x140" />
        <img class="image imagefourth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

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


</body>

</html>

Do you have any ideas that can help me? Or improve my lines of code that I've made so far? Thank you alot!

Solution

You need to use left and top rather than margin-left and margin-top. The margins of the images are causing the a tag to expand in size.

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

.college .imagesecond {
  transform: translate(0px, 500px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

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

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

.lycee .imagefourth {
  transform: translate(0px, 300px);
  transition: transform 0.5s ease-in-out 0.2s;
  border-radius: 8px;
  overflow: hidden;
}

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

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

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

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

body {
  background: url("http://via.placeholder.com/571x179") 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/196x175" />
        <img class="image imagesecond" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <img class="image imagethird" src="http://via.placeholder.com/183x140" />
        <img class="image imagefourth" src="http://via.placeholder.com/320x440" />
      </div>
    </a>

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


</body>

</html>