Image Gallery with Hover Effect

Written by @kerixa 16 May 2020

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!

Code Snippet:

                                                
                                                <!-- this script is provided by https://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/files/21-1.jpg">
<span>The</span>
</div>
<div class="box">
<img src="https://www.javascriptfreecode.com/files/21-2.jpg">
<span>Image</span>
</div>
<div class="box">
<img src="https://www.javascriptfreecode.com/files/21-3.jpg">
<span>Hover</span>
</div>
<div class="box">
<img src="https://www.javascriptfreecode.com/files/21-4.jpg">
<span>Effect</span>
</div>
</div><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: CryptoTech, AstroAudrey, admin_js, bloxio, yqaice
advertisement 2