Multipurpose Website Templates. How to manage effects (hover, lightbox, zoom) on images

Hello! This video tutorial shows how to manage effects (hover, lightbox, zoom) on images in Multipurpose Website templates.

It may happen that you want to remove/add zoom, hover or lightbox effect to the images on your website.

Let’s learn how to do that.

Removing/adding lightbox effect

1. Open the corresponding .html file of the page you are editing with any text editor (Notepad++, Sublime Text 2 etc.);

   Let’s say, you want to remove lightbox effect from the first portfolio image:

   

2. Use the CTR+F/CMND+Fkey (Windows OS/Mac OS) to find the desired image in the file:

   

3. As you can see, portfolio images are linked to lightbox:

   

4. Remove the attribute from title code, so it looks as follows:

5. Save the file and upload it to the server, replacing the original one.

6. Refresh the page on your website, you can see the first portfolio image does not have lightbox effect anymore.

Now, let’s say, you would like to have the item image opened in a lightbox, so that the larger image is displayed.

1. Add the following code to the image attribute:

   Here thumbnail-classic is a link class, data-size is an attribute, which defines the size of the larger image opened in a lightbox, and images/portfolio/portfolio-02-1170×600.jpg is the path to the image, which should be opened in a lightbox.

2. You may use your custom CSS classes to have the lightbox style match your desire.

3. The code should look as follows:

   

Now, let’s say, you would like to remove zoom effect from portfolio images.

Removing zoom effect from portfolio images

1. Zoom effect is controlled by the ‘transform’ property applied to portfolio image class in style.CSS file.

   

2. To remove zoom effect from portfolio images, locate the needed style rule using the developer tool and change the ‘transform’ property to ‘none’, so it looks as follows:

   transform: none;

3. Alternatively, you can simply add the following rule declaration to the very end of your style.css file:

   .thumbnail-classic > img, .thumbnail-classic > figure > img {
     transform: none !important;
   }

   Here ‘.thumbnail-classic > img, .thumbnail-classic > figure > img’ is portfolio image’s style class.

Now, let’s say, you would like to remove hover shadow effect from portfolio images.

Removing hover shadow effect from portfolio images

1. Hover shadow effect is controlled by the ‘box-shadow’ property applied to portfolio image class in style.CSS file.

   

2. To remove shadow effect from portfolio images, locate the needed style rule using developer tool and change the ‘box-shadow’ property to ‘none’, so it looks as follows:

   box-shadow: none;

3. Alternatively, you can simply add the following rule declaration to the very end of your style.css file:

   .thumbnail-classic > img, .thumbnail-classic > figure > img {
   box-shadow: none !important;
   }

   Where ‘.thumbnail-classic > img, .thumbnail-classic > figure > img’ is portfolio image’s style class.

This is the end of the tutorial. Now you know how to manage effects (hover, lightbox, zoom) on images in Multipurpose Website templates.

Feel free to check the detailed video tutorial below:

Take a closer look at the collection of Bootstrap Website Templates and select the best for your project.