How can I stop these pictures changing the hover effect it has when I turn them into link?

See more:

CSS

HTML

image

HTML5

CodeFirst

, +

I love the image hover effect style of these pictures but I want to make each picture a link to another page but when I do that using

<a href... 

it changes the style - instead of the pictures getting bigger when you hover over it, it changes, the pictures are already big and there is no writing on them.


Does anyone know how I can change it so the pictures are links with the same hover effect?

What I have tried:

This is the code I am doing, as you can see i have put links in for the first two pictures but I want them to be the style of the second two pictures---

 <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%;
}