CSS布局案例 6-51 网页图片悬停效果

一醉南柯

已于 2024-01-04 17:02:43 修改

阅读量1k

点赞数 1

分类专栏： Web前端开发文章标签： css 前端

于 2021-05-04 20:40:13 首次发布

本文链接：https://blog.csdn.net/dpl12/article/details/116404460

版权

CSS3 图片悬停蒙版效果过渡动画绝对定位

关键词由CSDN通过智能技术生成

Web前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

前言
实现过程

前言

使用css3实现网页图片悬停效果。

实现过程

1.步骤

网页图片悬停效果实现步骤:
	  1、先作一个区域，放置上图片，设置图片鼠标悬停时的蒙版效果
	  2、然后做标题和两个图片
	  3、使用绝对定位的方式，起始时将三个内容放置在区域外侧，悬停时使用过渡动画移动到区域内部

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页图片鼠标悬停效果</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 1300px;
				height: 866px;
				margin: 300px auto;
				position: relative;
				/* 将区域外边的文字和图片隐藏 */
				overflow: hidden;
			}
			.box img:nth-of-type(1){
				width: 1300px;
				height: 866px;
			}
			.bg{
				position: absolute;
				width: 1300px;
				height: 866px;
				background-color: black;
				top: 0;
				opacity: 0;
			}
			/* 设置透明度蒙版 */
			.box:hover .bg{
				opacity: 0.7;
			}
			/* 标题起始在区域的外边,鼠标悬停时进入区域 */
			.titles{
				position: absolute;
				width: 1300px;
				font-size: 70px;
				color: white;
				text-align: center;
				top: -100px;
				transition: all .5s linear;
			}
			.box:hover .titles{
				top: 100px;
			}
			/* 左侧图片动画与标题类似 */
			.box img:nth-of-type(3){
				position: absolute;
				width: 300px;
				height: 300px;
				top: 360px;
				left: -350px;
				transition: all .5s linear;
			}
			.box:hover img:nth-of-type(3){
				left: 500px;
			}
			/* 右侧图片动画与标题类似 */
			.box img:nth-of-type(2){
				position: absolute;
				width: 150px;
				height: 150px;
				top: 440px;
				right: -350px;
				transition: all .5s linear;
				z-index: 1;
			}
			.box:hover img:nth-of-type(2){
				right: 570px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="images/woshou.jpg" />
			<!-- 设置图片鼠标悬停时的蒙版 -->
			<p class="bg"></p>
			<h3 class="titles">商业资讯规划</h3>
			<img src="images/搜索.png" />
			<img src="images/圆.png" />
		</div>
	</body>
</html>