炫酷企业建站作品展示WordPress中文模板

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

首页 _ 全部文章 _ Code/特效 _ 图片/图形 _ 正文

CSS3图片遮罩层变形动画特效

PetitQ 图片/图形 2019-12-30 1.37K 0 0

收藏

阿里云

CSS3图片遮罩层变形动画特效
使用方法
在 HTML 文件中引入

<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />

<link href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">

也想出现在这里？联系我们吧

创客主机

HTML 结构

```
<div class="container">
```
```
    <div class="row">
```
```
        <div class="col-md-3 col-sm-6">
```
```
            <div class="product-grid">
```

                <div class="product-image">

                    <a href="#" class="image">

                        <img class="pic-1" src="images/img-1.jpg">

                        <img class="pic-2" src="images/img-2.jpg">

```
                    </a>
```

                    <div class="product-button-group">

                        <a href="#" class="add-to-wishlist">Add to wishlist</a>

                        <a href="#" class="quick-view">Quick view</a>

```
                    </div>
```
```
                </div>
```

                <div class="product-content">

                    <h3 class="title"><a href="#">Women's Blouse Top</a></h3>

                    <div class="price">$25.00</div>

                    <a href="#" class="add-to-cart">Add to Cart</a>

```
                </div>
```
```
            </div>
```
```
        </div>
```
```
        <div class="col-md-3 col-sm-6">
```
```
            <div class="product-grid">
```

                <div class="product-image">

                    <a href="#" class="image">

                        <img class="pic-1" src="images/img-3.jpg">

                        <img class="pic-2" src="images/img-4.jpg">

```
                    </a>
```

                    <span class="product-sale-label">Sale</span>

                    <div class="product-button-group">

                        <a href="#" class="add-to-wishlist">Add to wishlist</a>

                        <a href="#" class="quick-view">Quick view</a>

```
                    </div>
```
```
                </div>
```

                <div class="product-content">

                    <h3 class="title"><a href="#">Men's Shirt</a></h3>

                    <div class="price"><span>$35.00</span> $28.00</div>

                    <a href="#" class="add-to-cart">Add to Cart</a>

```
                </div>
```
```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</div>
```

CSS 样式

.product-grid{ font-family: 'Source Sans Pro', sans-serif; }

```
.product-grid .product-image{
```
```
    position: relative;
```
```
    overflow: hidden;
```
```
}
```

.product-grid .product-image a.image{ display: block; }

```
.product-grid .product-image img{
```
```
    width: 100%;
```
```
    height: auto;
```
```
}
```
```
.product-image .pic-1{
```
```
    backface-visibility: hidden;
```
```
    transition: all .5s ease 0s;
```
```
}
```

.product-grid .product-image:hover .pic-1{

```
    opacity: 0;
```
```
    transform: translateX(-50%);
```
```
}
```
```
.product-image .pic-2{
```
```
    width: 100%;
```
```
    height: 100%;
```
```
    backface-visibility: hidden;
```
```
    opacity: 0;
```
```
    position: absolute;
```
```
    top: 0;
```
```
    left: 50%;
```
```
    transition: all .5s ease 0s;
```
```
}
```

.product-grid .product-image:hover .pic-2{

```
    opacity: 1;
```
```
    left: 0;
```
```
}
```
```
.product-grid .product-sale-label{
```
```
    color: #fff;
```
```
    background: #b79b6c;
```
```
    font-size: 13px;
```
```
    font-weight: 600;
```
```
    text-align: center;
```
```
    text-transform: uppercase;
```
```
    padding: 5px 10px;
```
```
    border-radius: 3px 10px 10px 3px;
```
```
    position: absolute;
```
```
    top: 10px;
```
```
    left: 10px;
```
```
}
```
```
.product-grid .product-button-group{
```
```
    font-size: 0;
```
```
    width: 100%;
```
```
    opacity: 0;
```

    transform: perspective(600px) translateY(15px) rotateX(90deg);

```
    transform-origin: bottom center;
```
```
    position: absolute;
```
```
    bottom: 15px;
```
```
    left: 0;
```
```
    transition: all 0.3s ease 0.1s;
```
```
}
```

.product-grid:hover .product-button-group{

```
    opacity: 1;
```

    transform: translateY(0) rotateX(0);

```
}
```
```
.product-grid .product-button-group a{
```
```
    color: #fff;
```
```
    background: #333;
```
```
    font-size: 12px;
```
```
    font-weight: 600;
```
```
    text-transform: capitalize;
```
```
    text-align: center;
```
```
    width: calc(50% - 4px);
```
```
    padding: 10px 5px;
```
```
    margin: 0 2px;
```
```
    border-radius: 3px;
```

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

```
    display: inline-block;
```
```
    transition: all 0.3s ease 0s;
```
```
}
```

.product-grid .product-button-group a:hover{ background-color: #b79b6c; }

```
.product-grid .product-content{
```
```
    padding: 12px 0 0;
```
```
    position: relative;
```
```
}
```
```
.product-grid .title{
```
```
    font-size: 20px;
```
```
    font-weight: 500;
```
```
    text-transform: capitalize;
```
```
    margin: 0 0 5px;
```
```
}
```
```
.product-grid .title a{
```
```
    color: #333;
```
```
    transition: all 0.5s ease;
```
```
}
```

.product-grid .title a:hover{ color: #b79b6c; }

```
.product-grid .price{
```
```
    color: #b79b6c;
```
```
    font-size: 18px;
```
```
    font-weight: 600;
```
```
}
```
```
.product-grid .price span{
```
```
    color: #999;
```
```
    font-size: 17px;
```
```
    font-weight: 500;
```
```
    text-decoration: line-through;
```
```
    margin-right: 2px;
```
```
}
```

.product-grid:hover .price{ opacity: 0; }

```
.product-grid .add-to-cart{
```
```
    color: #333;
```
```
    font-size: 16px;
```
```
    font-weight: 600;
```
```
    opacity: 0;
```
```
    position: absolute;
```
```
    bottom: -5px;
```
```
    left: 0;
```
```
    transition: all 0.3s linear 0s;
```
```
}
```
```
.product-grid .add-to-cart:hover{
```
```
    color: #b79b6c;
```
```
    text-decoration: underline;
```
```
}
```
```
.product-grid:hover .add-to-cart{
```
```
    opacity: 1;
```
```
    bottom: 2px;
```
```
}
```
```
@media screen and (max-width:990px){
```
```
    .product-grid{ margin: 0 0 30px; }
```
```
}
```

CSS3 图片遮罩层变形动画特效

已有 342 人购买

永久更新：
演示数据：
提取码：mc3e

1

查看演示升级 VIP 立刻购买

演示地址

下载地址

也想出现在这里？联系我们吧

创客云

Aroma - Spa 美容护理养生网站 Shopify 模板

Total Recipe Generator - 食谱营养成分WordPress插件

相关文章

鼠标滑过图片显示遮罩层特效

图片/图形 5年前 2.14K
Repaintless 轻量级高性能CSS3动画库

图片/图形 5年前 1.21K
3D 商品展示图制作电子商务视觉设计模板

图片/图形 1年前 544

发表回复取消回复

要发表评论，您必须先登录。

流年似水

今日已经过去0小时

0%

这周已经过去0天

0%

本月已经过去0天

0%

今年已经过去0个月

0%

热门文章

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

原版主题 5年前 5.08K

Mac - 全屏摄影艺术相册展示模板WordPress主题，该主题适合那些从事摄影，绘画或数字图形艺术家…

VideoPro - 专业视频网站电影网站WordPress主题

VideoPro - 专业视频网站电影网站WordPress主题

原版主题 7年前 1.34W

VideoPro是最强大的视频网站WordPress主题。基于市场上最大的视频True Mag主题，Vi…

Bronx - 时尚服饰购物商城网站WordPress主题

Bronx - 时尚服饰购物商城网站WordPress主题

汉化主题, 原版主题 8年前 6.96K

Bronx WordPress深度汉化版是一款独特的Wordpress电商主题。自适应，Retina 支…

DUX-PRO创客云开发版WordPerss中文主题

DUX-PRO创客云开发版WordPerss中文主题

原版主题 9年前 2.78W

DUX-PRO创客科技美化专业版WordPerss主题企业博客模板，此模板为创客独家二次开发，HTML5…

Elessi - AJAX电商网站模板WordPress主题

Elessi - AJAX电商网站模板WordPress主题

原版主题 5年前 3.42K

可以使用Option Framework轻松定制Elessi，它具有通过SMOF强大的主题选项面板。该主…

点击签到领取积分可下载全站资源！

今日签到

连续签到

James Hui

2小时前

30
就业终极方案

5小时前

10
Joyce

5小时前

37
欢乐马

6小时前

236
lin818

6小时前

26

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题

LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！