多用途网站模板. 如何管理图像上的效果(悬停,灯箱,缩放)
June 8, 2017
Hello! 本视频教程展示了如何 manage effects (hover, lightbox(缩放)图像 in 多用途网站模板.
你可能想要删除/添加缩放, hover or lightbox 对图像的影响 website.
让我们学习一下怎么做.
删除/添加灯箱效果
打开相应的 .html 使用任何文本编辑的页面的文件 editor (notepad++, Sublime Text 2等.);
比如说,你想 remove lightbox effect from the first portfolio image:
Use the CTR+F/CMND+Fkey (Windows OS/Mac OS) 要在文件中找到所需的图像:
As you can see, portfolio 图片链接到 lightbox:
-
Save the file and upload 它到服务器,替换原来的一个.
Refresh the page on your website,你可以看到第一个 portfolio 图像没有 lightbox effect anymore.
现在,假设您想要在a中打开项目图像 lightbox,以便显示较大的图像.
将以下代码添加到image属性中:
Here thumbnail-classic is a link class, data-size 是一个属性,它定义在?中打开的较大图像的大小 lightbox, and images/portfolio/portfolio-02-1170×600.jpg 打开图像的路径是 lightbox.
您可以使用自定义CSS类来拥有 lightbox 风格符合你的愿望.
代码应该如下所示:
现在,假设你想移除缩放效果 portfolio images.
从投资组合图像中删除缩放效果
变焦效果由 ‘transform’ 属性适用于 portfolio 样式中的图像类.CSS file.
To remove zoom effect from portfolio ,找到所需的样式规则 developer tool and change the ‘transform’ property to ‘none’,所以它看起来如下:
transform: none;
或者,您可以简单地将以下规则声明添加到样式的末尾.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.
从作品集图像中移除悬停阴影效果
Hover 阴影效果是由 ‘box-shadow’ 属性适用于 portfolio 样式中的图像类.CSS file.
To 移除阴影效果 from portfolio 图片,找到所需的样式规则使用 developer tool and change the ‘box-shadow’ property to ‘none’,所以它看起来如下:
不必:没有;
或者,您可以简单地 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网站模板 并为您的项目选择最好的.