Responsive Image Gallery

HTML

<body>  <div class="container">    <div id="modal" class="modal">      <div class="modal-container">        <img id="current" src="" alt="">      </div>    </div>    <div class="imgs">      <div class="img-container">        <img src="https://image.ibb.co/mBJrqS/image1.jpg" alt="">        <div class="photo-overlay">          <h1>Click to enlarge</h1>        </div>      </div>      <div class="img-container">        <img src="https://image.ibb.co/cjZ9c7/image2.jpg" alt="">        <div class="photo-overlay">          <h1>Click to enlarge</h1>        </div>      </div>      <div class="img-container">        <img src="https://image.ibb.co/cpusx7/image3.jpg" alt="">        <div class="photo-overlay">          <h1>Click to enlarge</h1>        </div>      </div>      <div class="img-container">        <img src="https://image.ibb.co/jDiVjn/image4.jpg" alt="">        <div class="photo-overlay">          <h1>Click to enlarge</h1>        </div>      </div>      <div class="img-container">        <img src="https://image.ibb.co/etfnVS/image5.jpg" alt="">        <div class="photo-overlay">          <h1>Click to enlarge</h1>        </div>      </div>      <div class="img-container">        <img src="https://image.ibb.co/fjkbPn/image6.jpg" alt="">        <div class="photo-overlay">          <h1>Click to enlarge</h1>        </div>      </div>      <div class="img-container">        <img src="https://image.ibb.co/nGzsx7/image7.jpg" alt="">        <div class="photo-overlay">          <h1>Click to enlarge</h1>        </div>      </div>      <div class="img-container">        <img src="https://image.ibb.co/ihg0jn/image8.jpg" alt="">        <div class="photo-overlay">          <h1>Click to enlarge</h1>        </div>      </div>      <div class="img-container">        <img src="https://preview.ibb.co/kHrBqS/image9.jpg" alt="">        <div class="photo-overlay">          <h1>Click to enlarge</h1>        </div>      </div>       </div>  </div>  <script src="app.js"></script></body>

CSS

* {   padding: 0;   margin: 0;   box-sizing: border-box;   font-family: sans-serif; }  h1 {   font-size: 1.5em;   line-height: 8em; }  #modal {   display: none;   position: fixed;   z-index: 1;   left: 0;   top: 0;   height: 100%;   width: 100%;   overflow: auto;   background-color: rgba(0, 0, 0, 0.7); }  .modal-container {   margin: 10% auto;   width: 67%;   height: 67%;   display: flex;    }  .modal-container img {   max-height: 100%;   max-width: 100%;   margin: 0 auto;   animation-name: modalopen;   animation-duration: 1s;  }  .container {   max-width: 950px;   margin: auto;   border: white solid 3px;   background-color: white; }  .imgs img {   width: 100%;   height: 200px;   box-shadow: 5px 5px 2px rgba(40,62,80, 0.20); }  .imgs {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-gap: 15px;   cursor: pointer;   margin-top: 20px; } @media only screen and (max-width: 700px) {   .imgs {     grid-template-columns: repeat(2, 1fr);         } }  @media only screen and (max-width: 500px) {   .imgs {     grid-template-columns: repeat(1, 1fr);   } }  .photo-overlay  {   opacity: 0;   color: #fff;   position: absolute;   top: 0; 	right: 0; 	bottom: 0; 	left: 0;   padding-left: 20px; 	padding-right: 20px; 	display: flex; 	flex-direction: column; 	justify-content: center; 	align-items: center;   background: rgba(0,0,0, .45);   transition: opacity 0.1s linear; }  .photo-overlay:hover {   opacity: 1; }  .img-container {   position: relative; }  @keyframes modalopen {   from{opacity: 0}   to {opacity: 1} }

JavaScript

Responsive Image Gallery

Post a Comment

Author Profile

Social Plugin

Search This Blog

Popular Posts

Labels

Most Recent

Made with Love by

For Beginners

For Experts

Footer Copyright

Contact form

Responsive Image Gallery

You may like these posts

Post a Comment

Footer Copyright

Contact form