Как я могу остановить эти изображения, изменяя эффект наведения, который он имеет, когда я превращаю их в ссылку?

---

Мне нравится стиль эффекта наведения изображения этих картинок, но я хочу сделать каждую картинку ссылкой на другую страницу, но когда я делаю это с помощью

<a href... 

он меняет стиль - вместо того, чтобы картинки становились больше, когда вы наводите на них курсор, он меняется, картинки уже большие, и на них нет надписи.


Кто-нибудь знает, как я могу изменить его так, чтобы картинки были ссылками с тем же эффектом наведения?

Что я уже пробовал:

Это код, который я делаю, как вы можете видеть, я поместил ссылки на первые две картинки, но я хочу, чтобы они были в стиле вторых двух картинок---

 <pre>  
 <div class="container-fluid">
  <div class="box ">
    <a href="https://thehealthyminduk.000webhostapp.com/" target="_blank">  
    <img src="https://source.unsplash.com/1000x800"></a>  
      
    <span>CSS</span>
  </div>
  <div class="box">
       <a href="https://thehealthyminduk.000webhostapp.com/" target="_blank"> 
    <img src="https://source.unsplash.com/1000x802">
           <span>Image</span></a>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x804">
    <span>Hover</span>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x806">
    <span>Effect</span>
  </div>
</div>

CSS-

.container-fluid {
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 80vh;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  box-shadow: 0 20px 30px rgba(0,0,0,.1);
  line-height: 0;
}

.box > img {
  width: 200%;
  height: calc(100% - 10vh);
  object-fit: cover; 
  transition: .5s;
}

.box > span {
  font-size: 2.8vh;
  display: block;
  text-align: center;
  height: 10vh;
  line-height: 2.6;
}

.box:hover { flex: 1 1 50%; }
.box:hover > img {
  width: 100%;
  height: 100%;
}

---