遮罩

创建拥有不同样式的图片遮罩效果。

用法

这个组件使用方法很简单。创建一个定位遮罩层的语境,需要为包含图片的容器元素添加 overlay 类。为一个子元素添加 overlay-panel 类创建真实的遮罩面板。通常你需要使用 <figure<figcaption> 元素。

示例

标题

这里是一些描述文字, 点击 查看详情 跳转到详情。

代码

<figure class="overlay">
    <img width="" height="" alt="" src="">
    <figcaption class="overlay-panel">...</figcaption>
</figure>

通过鼠标悬停触发遮罩效果

默认情况下,遮罩层是可见的。添加 overlay-hover 类到遮罩层的容器,实现遮罩层的隐藏和hover拨动效果。

示例

标题

这里是一些描述文字, 点击 查看详情 跳转到详情。

代码

<figure class="overlay overlay-hover">
    <img width="" height="" alt="" src="">
    <figcaption class="overlay-panel">...</figcaption>
</figure>

active 状态触发遮罩

想要在遮罩层的父容器处于 actvie 状态时拨动遮罩层,添加 overlay-active 类即可。

遮罩背景

为遮罩层的容器添加 overlay-background 类,就能赋予遮罩层背景效果。

示例

标题

这里是一些描述文字, 点击 查看详情 跳转到详情。

代码

<figure class="overlay">
    <img width="" height="" alt="" src="">
    <figcaption class="overlay-panel overlay-background">...</figcaption>
</figure>

遮罩位置

默认地,遮罩层从左上角开始覆盖整个父容器。要想定位和修剪遮罩层,添加以下类中的一个到遮罩面板中即可。

描述
overlay-top 遮罩层顶部对齐
overlay-bottom 遮罩层底部对齐
overlay-left 遮罩层左对齐
overlay-right 遮罩层右对齐

示例

图像

顶部遮罩

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

图像

底部遮罩

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

图像

左边遮罩

去抗争、去奋斗。

图像

右边遮罩

去抗争、去奋斗。

代码

<figure class="overlay">
    <img width="" height="" alt="" src="">
    <figcaption class="overlay-panel overlay-top">...</figcaption>
</figure>

遮罩图标

基本上可以把任意内容放在遮罩层上面。你也可以添加 overlay-icon 类到遮罩面板中,将会显示一个图标。

示例

代码

<figure class="overlay">
    <img width="" height="" alt="" src="">
    <figcaption class="overlay-panel overlay-icon">...</figcaption>
</figure>

遮罩图像

要使用图片作为遮罩层,需要为带有 overlay-panel<img> 元素添加 overlay-image 类名。

示例

代码

<figure class="overlay">
    <img width="" height="" alt="" src="">
    <img class="overlay-panel overlay-image" width="" height="" alt="" src="">
</figure>

遮罩的过渡效果

遮罩层面板和图片都可以轻易做成动画效果。只需添加以下类中的一个到遮罩层面板或者 <img> 元素。记住,这玩意只能与 overlay-hoveroverlay-active 组合使用。

描述
overlay-slide-top 添加这个类到遮罩面板,使它由顶部滑出。
overlay-slide-bottom 添加这个类到遮罩面板,使它由底部滑出。
overlay-slide-left 添加这个类到遮罩面板,使它由左边滑出。
overlay-slide-right 添加这个类到遮罩面板,使它由右边滑出。
overlay-fade 添加这个类到遮罩面板或图片,使它淡入。
overlay-scale 添加这个类到图片使它放大。
overlay-spin 添加这个类到图片,使它向右轻轻旋转。
overlay-grayscale 添加这个类到图片,hover时去饱和度并着色。

示例

图像

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

图像

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

图像

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

代码

<figure class="overlay overlay-hover">
    <img width="" height="" alt="" src="">
    <figcaption class="overlay-panel overlay-slide-bottom">...</figcaption>
</figure>
<figure class="overlay overlay-hover">
    <img class="overlay-scale" width="" height="" alt="" src="">
    <figcaption class="overlay-panel ignore">...</figcaption>
</figure>
<figure class="overlay overlay-hover">
    <img class="overlay-spin" width="" height="" alt="" src="">
    <figcaption class="overlay-panel  overlay-slide-bottom">...</figcaption>
</figure>

遮罩层的锚

将整个遮罩层作为链接,只需要将 <a> 元素放入到遮罩层容器,并添加来自效果组件的 position-cover 类名。

重要 应用这个效果时,需要确保已经移除了带有其他容器元素的 <figcaption> ,比如 <div> 。否则标签不能生效。

示例

图像

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。

代码

<figure class="overlay">
    <img src="" width="" height="" alt="">
    <div class="overlay-panel">...</div>
    <a class="position-cover" href=""></a>
</figure>

备注 只将遮罩面板作为链接,只需要将锚移至遮罩面板内即可。

遮罩与 Flex

你可以使用 Flex 组件 在垂直和水平方向上居中遮罩面板,而无需进行裁剪。

示例

标题

这里是一些描述文字, 点击 查看详情 跳转到详情。

标题

这里是一些描述文字, 点击 查看详情 跳转到详情。

代码

<!-- In this example the overlay panel is centered vertically and horizontally -->
<figure class="overlay">
    <img src="" width="" height="" alt="">
    <figcaption class="overlay-panel flex flex-center flex-middle text-center">
        <div>...</div>
    </figcaption>
</figure>
<!-- In this example the overlay panel is aligned to the bottom -->
<figure class="overlay">
    <img src="" width="" height="" alt="">
    <figcaption class="overlay-panel flex flex-bottom">
        <div>...</div>
    </figcaption>
</figure>