1. Home
  2. Docs
  3. Image-Effects
  4. Image Lightbox

Image Lightbox Effects

Lightbox is a script used to overlay images on the current page. It’s a snap to set up and works on all modern browsers. Here, in this tutorial, you’ll know about this effect element and see how it works within image hover. Now, let’s dive into it:

⇒See Demo⇐

Creating a New Image Hover with Image Lightbox

First, navigate Image Hover> Image Hover> Elements> Image Lightbox from your dashboard.

Then, create a new Image Hover style with Image Lightbox effects by clicking on the Create Style button like below

See the Using Image Hover section to know how to add and edit an image hover item.


Customizing & Adding Data

Now, after you create a new Image Hover using Image Lightbox Effects it’s time to go further and add/style data to your style. Let’s start this section:


Add/Edit New Image Hover

To add a new Image Lightbox hover item, click on the Add New Light Box (+) button. After clicking that button, you’ll find a Hover Modification Form to upload the lightbox image and add info.

Add for both general and popup settings.

After selecting a layout and creating a lightbox image item, you can see the live preview at the bottom side of the editor page.

Now, when you hover over the image you’ll find an Edit icon in the image. See the image below,

By selecting the Edit icon, you’ll find the image hover modification form. Here you can edit the image hover in image lightbox effects.


General Settings

ΞGeneral Style- In the first section of the General Settings area, you can customize the columns and measurements of the image lightbox. You can define the number of columns you want to display in a single row and set the padding, margin, and background.

ΞImage Settings- Customize the image settings here. Set the custom image height, and width; customize border, border-radius, and box-shadow.

ΞLight Settings- Customize the lightbox settings here. Add the background color to the image lightbox popups and control the opacity.

ΞHeading Details Settings- In this section, you can customize the heading and description styles and effects.

ΞImage Overlay Settings- Set the image overlay icon, icon size, and background.

Custom CSS Option

Here you’ll find a box where you can add your custom CSS code. Advanced developers can use this option for their convenience. After entering the codes, developers can see the live preview. Once you finish coding hit the “Save” button to make your changes.

Now, just Copy the Shortcode and Paste anywhere in the post or page or plugins where you want to show the Image Lightbox Effects.

Was this article helpful to you? Yes No

How can we help?