华为官网图片缩放效果CSS实现

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为新闻</title>
    <link rel="stylesheet" href="./css/demo.css">
</head>
 
<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/product.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>产品</h4>
                        <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
 
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei1.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>行业洞察</h4>
                        <h5>迈向智能世界2030</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei2.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>《ICT新视界》刊首语</h4>
                        <h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
        </ul>
    </div>
</body>
 
</html>

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
li {
    list-style: none;
}
 
a {
    text-decoration: none;
}
 
img {
    width: 100%;
    vertical-align: middle;
}
 
.box {
    width: 1110px;
    height: 247px;
    margin: 20px auto;
    /* background-color: pink; */
}
 
.box li {
    position: relative;
    float: left;
    width: 350px;
    height: 247px;
    margin-right: 30px;
    overflow: hidden;
}
 
.box li:last-child {
    margin-right: 0;
}
 
.box .txt {
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 350px;
    height: auto;
    padding: 20px 30px;
    z-index: 1;
    color: #fff;
    transition: transform .5s;
    /* transition: all .5s; */
}
 
.box .txt h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 2em;
    color: #fff;
}
 
.box .txt h5 {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 1.5em;
    color: #fff;
}
 
.box .txt p {
    color: #fff;
    font-size: 14px;
}
 
.box .txt p .iconfont {
    color: #c7000b;
    vertical-align: middle;
    font-size: 20px;
    font-weight: 700;
}
 
/* 1. 渐变背景的盒子 */
.box .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
    height: 247px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );
    opacity: 0;
    transition: all .5s;
}
 
/* 2. hover效果 */
/* 2.1 图片缩放 */
.box li .pic img {
    transition: all .5s;
}
.box li:hover .pic img {
    transform: scale(1.2);
}
 
 
/* 2.2 渐变背景显示 */
.box li:hover .mask {
    opacity: 1;
}
 
/* 2.3 文字向上移动 */
.box li:hover .txt {
    transform: translateY(-50px);
}

posted @ 2022-05-28 20:58 RHCHIK 阅读(85) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css项目默认全局样式收纳

· CSS3盒模型(自动内减-内减模式)

· CSS基础华为渐变色产品列表综合实战

· css图片宽高不同，缩放图片，保持宽高，注意最外层的盒子要用display:inline-flex

· 动态展示缩放背景图

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

百索园前端

懂一点代码的程序员

华为官网图片缩放效果CSS实现

搜索

随笔分类

CMS模板

后端开发

开发助手

前端开发

数据库

系统

组件库

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>华为新闻</title>
	<link rel="stylesheet" href="./css/demo.css">
	</head>

	<body>
	<div class="box">
	<ul>
	<li>
	<a href="#">
	<div class="pic">
	<img src="./images/product.jpeg" alt="">
	</div>
	<div class="txt">
	<h4>产品</h4>
	<h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
	<p>
	<span>了解更多</span>
	<i></i>
	</p>
	</div>

	<!-- 添加渐变背景 -->
	<div class="mask"></div>
	</a>
	</li>
	<li>
	<a href="#">
	<div class="pic">
	<img src="./images/huawei1.jpeg" alt="">
	</div>
	<div class="txt">
	<h4>行业洞察</h4>
	<h5>迈向智能世界2030</h5>
	<p>
	<span>了解更多</span>
	<i></i>
	</p>
	</div>
	<!-- 添加渐变背景 -->
	<div class="mask"></div>
	</a>
	</li>
	<li>
	<a href="#">
	<div class="pic">
	<img src="./images/huawei2.jpeg" alt="">
	</div>
	<div class="txt">
	<h4>《ICT新视界》刊首语</h4>
	<h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5>
	<p>
	<span>了解更多</span>
	<i></i>
	</p>
	</div>
	<!-- 添加渐变背景 -->
	<div class="mask"></div>
	</a>
	</li>
	</ul>
	</div>
	</body>

	</html>

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	li {
	list-style: none;
	}

	a {
	text-decoration: none;
	}

	img {
	width: 100%;
	vertical-align: middle;
	}

	.box {
	width: 1110px;
	height: 247px;
	margin: 20px auto;
	/* background-color: pink; */
	}

	.box li {
	position: relative;
	float: left;
	width: 350px;
	height: 247px;
	margin-right: 30px;
	overflow: hidden;
	}

	.box li:last-child {
	margin-right: 0;
	}

	.box .txt {
	position: absolute;
	left: 0;
	bottom: -50px;
	width: 350px;
	height: auto;
	padding: 20px 30px;
	z-index: 1;
	color: #fff;
	transition: transform .5s;
	/* transition: all .5s; */
	}

	.box .txt h4 {
	font-size: 14px;
	font-weight: 400;
	line-height: 2em;
	color: #fff;
	}

	.box .txt h5 {
	margin-bottom: 40px;
	font-size: 18px;
	line-height: 1.5em;
	color: #fff;
	}

	.box .txt p {
	color: #fff;
	font-size: 14px;
	}

	.box .txt p .iconfont {
	color: #c7000b;
	vertical-align: middle;
	font-size: 20px;
	font-weight: 700;
	}

	/* 1. 渐变背景的盒子 */
	.box .mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 350px;
	height: 247px;
	background-image: linear-gradient(
	transparent,
	rgba(0,0,0,.6)
	);
	opacity: 0;
	transition: all .5s;
	}

	/* 2. hover效果 */
	/* 2.1 图片缩放 */
	.box li .pic img {
	transition: all .5s;
	}
	.box li:hover .pic img {
	transform: scale(1.2);
	}


	/* 2.2 渐变背景显示 */
	.box li:hover .mask {
	opacity: 1;
	}

	/* 2.3 文字向上移动 */
	.box li:hover .txt {
	transform: translateY(-50px);
	}