<!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.container {
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 100vh;
}

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

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

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

.box:hover {
  -webkit-box-flex: 1;
          flex: 1 1 50%;
}

.box:hover > img {
  width: 100%;
  height: 100%;
}
</style>
<div class="container">
<div class="box">
<img src="https://www.javascriptfreecode.com/uploads/pictures/21-1.jpg">
<span>The</span>
</div>
<div class="box">
<img src="https://www.javascriptfreecode.com/uploads/pictures/21-2.jpg">
<span>Image</span>
</div>
<div class="box">
<img src="https://www.javascriptfreecode.com/uploads/pictures/21-3.jpg">
<span>Hover</span>
</div>
<div class="box">
<img src="https://www.javascriptfreecode.com/uploads/pictures/21-4.jpg">
<span>Effect</span>
</div>
</div><a target='_blank' href='www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>