多用途网站模板. 如何管理图像上的效果(悬停，灯箱，缩放)

Hello! 本视频教程展示了如何 manage effects (hover, lightbox, zoom) on images in 多用途网站模板.

你可能想要删除/添加缩放， hover or lightbox 对图像的影响 website.

让我们学习一下怎么做.

删除/添加灯箱效果

1. 打开相应的 .html 使用任何文本编辑的页面的文件 editor (notepad++， Sublime Text 2等.);

   比如说，你想 remove lightbox effect from the first portfolio image:

   

2. Use the CTR+F/CMND+Fkey (Windows OS/Mac OS) 要在文件中找到所需的图像:

   

3. As you can see, portfolio 图片链接到 lightbox:

   

4. Remove the 属性从标题代码，所以它看起来如下:

5. Save the file and upload 它到服务器，替换原来的一个.

6. Refresh the page on your website，你可以看到第一个 portfolio 图像没有 lightbox effect anymore.

现在，假设您想要在a中打开项目图像 lightbox，以便显示较大的图像.

1. 将以下代码添加到image属性中:

   Here thumbnail-classic is a link class, data-size 是一个属性，它定义在?中打开的较大图像的大小 lightbox, and images/portfolio/portfolio-02-1170×600.jpg 打开图像的路径是 lightbox.

2. 您可以使用自定义CSS类来拥有 lightbox 风格符合你的愿望.

3. 代码应该如下所示:

   

现在，假设你想移除缩放效果 portfolio images.

从投资组合图像中删除缩放效果

1. 变焦效果由 ‘transform’ 属性适用于 portfolio 样式中的图像类.CSS file.

   

2. To remove zoom effect from portfolio ，找到所需的样式规则 developer tool and change the ‘transform’ property to ‘none’，所以它看起来如下:

   transform: none;

3. 或者，您可以简单地将以下规则声明添加到样式的末尾.css file:

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

   Here ‘.thumbnail-classic > img, .thumbnail-classic > figure > img’ is portfolio 图像的样式类.

现在，假设你想移除 hover 阴影效果来自 portfolio images.

从作品集图像中移除悬停阴影效果

1. Hover 阴影效果是由 ‘box-shadow’ 属性适用于 portfolio 样式中的图像类.CSS file.

   

2. To 移除阴影效果 from portfolio 图片，找到所需的样式规则使用 developer tool and change the ‘box-shadow’ property to ‘none’，所以它看起来如下:

   不必:没有;

3. 或者，您可以简单地 add 下面的规则声明到你的 style.css file:

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

   Where ‘.thumbnail-classic > img, .thumbnail-classic > figure > img’ is portfolio 图像的样式类.

本教程到此结束. 现在你知道如何管理效果了吧(hover, lightbox(缩放)在多用途图像 Website templates.

请随时查看下面的详细视频教程:

让我们仔细看看收藏的 Bootstrap网站模板 并为您的项目选择最好的.