why is it possible to animate images when you hover over the div they are in instead of the individual images in css?

I would suggest to group both images together in element, and offset the images when that wrapper-element is hovered over. And when hovering over an individual image, override that offset.

That way, everything that is not hovered over, is being offset the opposite way.

Sidenote:
I removed the classes as well as the <div id="header">-tag. Reason is, the images can be selected quite easily even without a class, and secondly, because there is already an element purposed as a header semantically.

The display: flex; flex-flow: column; on <header> and the align-self: flex-start on <div> are to keep the layout-flow vertically and the <div> at minimum size.
Without the align-self: flex-start, the <div> would stretch out, filling the rest of the row (basically width: 100%), which would result in unwanted behavior when hovering over it.

header {
  display: flex;
  flex-flow:column;
}
header > div {align-self: flex-start}
header > div > img {
  width: 100px;
  transition: transform 0.5s;
}
header > div:hover > img {transform: translateY(-15px)}
header > div:hover > img:hover {transform: translateY(15px)}

<header>
  <h1>My Title!</h1>
  <div>
    <img src="https://i.pinimg.com/originals/71/ba/35/71ba3562bc89f6a11e5d5625da09bfeb.png" alt="Sun">
    <img src="https://i.ibb.co/z6PQ7qX/moon.png" alt="Moon">
  </div>
</header>