Simple Image Viewer With Smooth CSS Animations Plugin

Simple HTML CSS jquery image viewer is minimalist that expands and displays images in a full-screen lightbox, with custom CSS3 powered open/close animations.

responsive grid gallery with lightbox popup, responsive lightbox image gallery jquery, responsive lightbox gallery, simple lightbox gallery

A Tiny Lightbox Component For Vue.js 3.0 | easy-lightbox

How to make use of it:

1. Create the HTML for the picture viewer (lightbox).

<div id="image-viewer">
  <span class="close">&times;</span>
  <img class="modal-content" id="full-image">

2. The most important JavaScript (jQuery script) to trigger the picture lightbox when clicking on the picture inside your web page.

<div class="images">
  <img src="1.jpg" alt="My Image" width="400" height="300" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
$(".images img").click(function(){
  $("#full-image").attr("src", $(this).attr("src"));

$("#image-viewer .close").click(function(){

3. Style the picture makes use of because the lightbox trigger.

img {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;

img:hover {
  opacity: 0.7;

4. The fundamental CSS styles & animations for the picture lightbox.

#image-viewer {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;

.modal-content { 
  animation-name: zoom;
  animation-duration: 0.6s;

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}

#image-viewer .close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;

#image-viewer .close:hover,
#image-viewer .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;

@media only screen and (max-width: 700px){
  .modal-content {
      width: 100%;

Minialist Image Lightbox With Smooth CSS Animations, simple image viewer html css jquery Plugin/Github, minimal lightbox, lightbox zoom effect

See Demo And Download

Official Website(nasujon): Click Here

This superior jQuery/javascript plugin is developed by nasujon. For extra Advanced usage, please go to the official website.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

Your email address will not be published. Required fields are marked *