用HTML和CSS实现华为新闻效果——鼠标悬停时图片缩放并且文字上升

落凡尘༣

已于 2023-12-03 16:27:26 修改

阅读量3.2k

点赞数 7

文章标签： html5 css3

于 2023-10-12 17:41:56 首次发布

本文链接：https://blog.csdn.net/m0_65290003/article/details/133794076

版权

用HTML和CSS实现华为新闻效果——鼠标悬停时图片缩放并且文字上升

用HTML和CSS实现华为新闻效果——鼠标悬停时图片缩放并且文字上升

用HTML和CSS实现华为新闻效果——鼠标悬停时图片缩放并且文字上升

一、效果

在这里插入图片描述
当鼠标悬停时，有三个效果：
1. 图片缩放；
2. 文字上浮；
3. 图片伴有透明遮罩

二、、整体分析

1. 图片缩放

使用伪类选择器hover（使用格式：选择器:hover { CSS 属性 }
），在鼠标悬停时设置图片样式

.dec:hover img {
        transform: scale(1.2);
      }

这里是使用scale使图片达到放大的效果，括号中的参数即为图片的放大倍数，也可以在img上添加过渡效果，让缩放更为柔和

2. 文字上浮

同样使用伪类选择器hover，在鼠标悬停时设置文字样式

.dec .txt {
        position: absolute;
        bottom: -70px;
        padding: 25px 30px;
        z-index: 2;
        font-size: 18px;
        color: #fff;
        transition: all 0.8s;
      }
      .dec:hover .txt {
        transform: translateY(-40px);
      }
      .dec .txt h5 {
        font-size: 22px;
        margin: 5px 0;
      }
      .dec .txt .more {
        margin-top: 20px;
        font-size: 15px;
      }
      .dec .txt .more i {
        color: red;
      }

先用定位（父相子绝），将bottom设置为负值，让最后一排文字超出盒子的范围，并在盒子的父级（即：.dec）添加overflow: hidden将文字进行隐藏

3. 图片伴有透明遮罩

应用伪元素和父相子绝让遮罩覆盖dec盒子

.dec::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(transparent, rgba(94, 89, 89, 0.5));
        opacity: 0;
      }
      .dec:hover::after {
        opacity: 1;
      }

这里的opacity 属性指定了一个元素的不透明度。即：元素背景的被覆盖程度。

opacity: 1	完全不透明
opacity: 0.5	半透明
opacity: 0	完全透明

4. 注意事项

因为遮罩用了after伪元素，所以会压住txt和img，所以想让txt压在遮罩上面，需要设置z-index值（默认值为0，取值越大，层级越高）

三、完整代码

1. HTML代码

<body>
    <div class="news">
      <div class="dec">
        <img src="./images/product.jpeg" alt="" />
        <div class="txt">
          <p>产品</p>
          <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
          <p class="more">了解更多<i class="iconfont icon-arrow-right"></i></p>
        </div>
      </div>
      <div class="dec">
        <img src="./images/huawei1.jpeg" alt="" />
        <div class="txt">
          <p>行业洞察</p>
          <h5>迈向智能世界2030</h5>
          <p class="more">了解更多<i class="iconfont icon-arrow-right"></i></p>
        </div>
      </div>
      <div class="dec">
        <img src="./images/huawei2.jpeg" alt="" />
        <div class="txt">
          <p>《ICT新视界》刊首语</p>
          <h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5>
          <p class="more">了解更多<i class="iconfont icon-arrow-right"></i></p>
        </div>
      </div>
    </div>
  </body>

2. CSS样式

<style>
      .news {
        margin: 50px;
      }
      .dec {
        position: relative;
        float: left;
        margin-right: 10px;
        width: 400px;
        height: 280px;
        overflow: hidden;
      }
      .dec img {
        width: 100%;
        height: 100%;
        transition: all 0.8s;
      }
      .dec:hover img {
        transform: scale(1.2);
      }
      .dec .txt {
        position: absolute;
        bottom: -70px;
        padding: 25px 30px;
        z-index: 2;
        font-size: 18px;
        color: #fff;
        transition: all 0.8s;
      }
      .dec:hover .txt {
        transform: translateY(-40px);
      }
      .dec .txt h5 {
        font-size: 22px;
        margin: 5px 0;
      }
      .dec .txt .more {
        margin-top: 20px;
        font-size: 15px;
      }
      .dec .txt .more i {
        color: red;
      }
      /* 遮罩 */
      .dec::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(transparent, rgba(94, 89, 89, 0.5));
        opacity: 0;
      }
      .dec:hover::after {
        opacity: 1;
      }
    </style>

落凡尘༣

关注

7
点赞
踩
60

收藏

觉得还不错? 一键收藏
1
评论
用HTML和CSS实现华为新闻效果——鼠标悬停时图片缩放并且文字上升

先用定位（父相子绝），将bottom设置为负值，让最后一排文字超出盒子的范围，并在盒子的父级（即：.dec）添加overflow: hidden将文字进行隐藏。因为遮罩用了after伪元素，所以会压住txt和img，所以想让txt压在遮罩上面，需要设置z-index值（默认值为0，取值越大，层级越高）这里是使用scale使图片达到放大的效果，括号中的参数即为图片的放大倍数，也可以在img上添加过渡效果，让缩放更为柔和。同样使用伪类选择器hover，在鼠标悬停时设置文字样式。），在鼠标悬停时设置图片样式。
复制链接

扫一扫