CSS3-background-image渐变

实现效果如下：

观察发现鼠标放上去的时候出现了三个变化，渐变背景，文字位移和图片放大。

渐变背景：background-image: linear-gradient(transparent,rgba(0, 0, 0, .6)); // 从transparent白色到0.6透明度的黑色。默认情况下背景遮罩不显示(opacity:0)，hover的时候定位到盒子上(opacity:1)

文字位移：transform:translate(0,80px) // 水平位置保持不变，垂直方向隐藏”查看更多“这几个字。当鼠标hover的时候进行还原 transform: translate(0, 0);

图片放大：当鼠标hover的时候 transform:scale(1.1) 实现放大

整体代码如下：

1     <div class="box">

2         <img src="../images/product.jpeg" alt="">

3         <div class="dis">

4             <p>OceanStor Pacific 海量存储斩获2021 Interop金奖</p>

5             <p>查看更多</p>

6         </div>

7         <div class="mask"></div>

8     </div>

 1 <style>

 2     .box {

 3         position: relative;

 4         width: 768px;

 5         height: 542px;

 6         overflow: hidden;

 7     }

 8

 9     .box .dis {

10         position: absolute;

11         left: 10px;

12         bottom: 10px;

13         font-size: 26px;

14         color: #fff;

15         transform: translate(0, 80px);

16         z-index: 1;

17

18         transition: all .5s;

19     }

20

21     .box:hover .dis {

22         transform: translate(0, 0);

23     }

24

25     .box img {

26         transition: all .5s;

27     }

28

29     .box:hover img {

30         transform: scale(1.1);

31     }

32

33     .mask {

34         position: absolute;

35         top: 0;

36         left: 0;

37         width: 768px;

38         height: 542px;

39         opacity: 0;

40         background-image: linear-gradient(transparent,

41                 rgba(0, 0, 0, .6));

42         transition: all .2s;

43     }

44

45     .box:hover .mask {

46         opacity: 1;

47     }

48 </style>

注意要让文字保持在最前面(z-index:1)，否则加上背景遮罩会影响文字的显示效果

巴特西

CSS3-background-image渐变

最新文章

热门文章