Javascript Code: Image Gallery with Hover Effect

Nowadays image galleries are more common than ever. All website owners have some images to share in their pages. Therefore, finding a suitable image gallery which is stylish, simple and beautiful is very important. The following image gallery is for those who need one. Just hover on the images, they will open and show themselves fully to you!

<!-- this script got from 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='http://www.javascriptfreecode.com/' style='font-size: 8pt; text-decoration: none'>JavaScript Codes</a>

If you don't know how to use this code or need more information Click here!

Javascript Best Codes

Javascript Code: Image Gallery with Hover Effect

Review

Links