CSS Img resize transition time only on hover

I'm having an issue with an animation on one of my images. I want the image to resize on hover with a transition time (and then have a transition time back to the original size when the mouse moves off the image) but then when i resize the window and the image resizes accordingly, it resizes with the transition time . Does anyone know a way to get around this?

<div class="column">
    <a href="-----.html">
        <img src="-----.jpg">
    </a>
</div>

.column img{
    filter: brightness(0.8);
    transition: 0.6s ease;
    width:100%;
    height: calc(100vh - 300px);
}

.column:hover img{
    filter: brightness(0.5);
    width:110%;
    transform: translate(-5%,-5%);
    transition: 0.6s ease;
    height: calc(110vh - 300px);
}

I can see why the transition applies to the image when the window resizes, but i don't know how else to get the transition to apply when the mouse moves away. Can anyone suggest a way around this?

Gif of resizing issue

edit: full code posted below

html {
  height: 100%;
}

body {
  min-width: 600px;
  min-height: 100%;
  position: relative;
  font-family: Helvetica;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  background-color: #FFFFFF;
  overflow-y: hidden;
}


/*Header*/

header {
  background: #FFFFFF;
  color: #F89828;
  height: 159px;
}

header img {
  margin-left: calc(50% - 122px);
  margin-top: 60px;
  margin-bottom: 60px;
  height: 39px;
  width: 244px;
}

.column {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
  padding: 0px;
  overflow: hidden;
  height: calc(100vh - 239px);
}

.row .column img {
  background: #000000;
  width: 100%;
  filter: brightness(0.8);
  height: calc(100vh - 239px);
  transition: 0.6s ease;
}

.row .column:hover img {
  transition: 0.6s ease;
  width: 110%;
  cursor: pointer;
  transform: translate(-5%, -5%);
  filter: brightness(0.5);
  height: calc(110vh - 239px);
}

.centered {
  color: #FFFFFF;
  position: absolute;
  font-size: 4em;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
}


/*footer*/

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  color: #FFFFFF;
  background-color: #808080;
  font-weight: bold;
}

<body>
  <header>
    <img src="https://picsum.photos/400/100/?random">
  </header>

  <div class="row">
    <div class="column">
      <a href="---.html">
        <img src="https://picsum.photos/300/100/?random">
        <div class="centered">1</div>
      </a>
    </div>
    <div class="column">
      <a href="---.html">
        <img src="https://picsum.photos/300/100/?random" />
        <div class="centered">2</div>
      </a>
    </div>
  </div>

  <footer>
    <p>This is where I would put some filler text, if I had any</p>
  </footer>
</body>

Solution

You could set the transition on your image only when the window is hovered. This way, on resize it won't affect your element anymore, but on your element's hover and mouseout it will still be active.

/* when hovering the page */
:hover .row .column img {
  transition: 0.6s ease;
}

.row .column img {
  background: #000000;
  width: 100%;
  filter: brightness(0.8);
  height: calc(80vh - 10px);
  /*  transition: 0.6s ease; [removed]*/
}

.row .column:hover img {
  /*  transition: 0.6s ease; [useless]*/
  width: 110%;
  cursor: pointer;
  transform: translate(-5%, -5%);
  filter: brightness(0.5);
  height: calc(80vh - 10px);
}

.column {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
  padding: 0px;
  overflow: hidden;
  height: calc(60vh - 10px);
}

<div class="row">
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random">
      <div class="centered">1</div>
    </a>
  </div>
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random" />
      <div class="centered">2</div>
    </a>
  </div>
</div>

But using this solution, if mousing-out from the document itself, then the transition will also get disabled...

Unfortunately, I don't see any other solution than that, except using js of course.

(function(){
  let timer;
  const docEl = document.documentElement;
  addEventListener('resize', e => {
    clearTimeout(timer);
    docEl.classList.add('resizing');
    timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
  });
})();

:root.resizing .row .column img {
  transition: none;
}
.row .column img {
  background: #000000;
  width: 100%;
  filter: brightness(0.8);
  height: calc(80vh - 10px);
  transition: 0.6s ease;
}

.row .column:hover img {
  width: 110%;
  cursor: pointer;
  transform: translate(-5%, -5%);
  filter: brightness(0.5);
  height: calc(80vh - 10px);
}

.column {
  float: left;
  position: relative;
  text-align: center;
  width: 50%;
  padding: 0px;
  overflow: hidden;
  height: calc(60vh - 10px);
}

<div class="row">
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random">
      <div class="centered">1</div>
    </a>
  </div>
  <div class="column">
    <a href="---.html">
      <img src="https://picsum.photos/300/100/?random" />
      <div class="centered">2</div>
    </a>
  </div>
</div>