Four image hover effect

Lien d’origine: https://codepen.io/knyttneve/pen/YgZbLO

HTML:

<section class="fourImageHoverEffect">
<div class="container">
<div class="box">
<img src="https://source.unsplash.com/1000x800">
<span>CSS</span>
</div>
<div class="box">
<img src="https://source.unsplash.com/1000x802">
<span>Image</span>
</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>
</section>

CSS:

.fourImageHoverEffect .container {
display: flex;
width: 100%;
padding: 4% 2%;
box-sizing: border-box;
height: 100vh;
}
.fourImageHoverEffect .box {
flex: 1;
overflow: hidden;
transition: 0.5s;
margin: 0 2%;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
line-height: 0;
}
.fourImageHoverEffect .box > img {
width: 200%;
height: calc(100% - 10vh);
-o-object-fit: cover;
object-fit: cover;
transition: 0.5s;
}
.fourImageHoverEffect .box > span {
font-size: 3.8vh;
display: block;
text-align: center;
height: 10vh;
line-height: 2.6;
}
.fourImageHoverEffect .box:hover {
flex: 1 1 50%;
}
.fourImageHoverEffect .box:hover > img {
width: 100%;
height: 100%;
}