当前位置：网站首页>Mouse over to change the transparency of web page image

Mouse over to change the transparency of web page image

2022-07-04 08:10:00 【Little Zeng with nowhere to put】

Tools ：HBuilder X 2.8.8、 Google browser .

One 、 The project catalogue is as follows ：

Two 、 To write html Code and style css file

homework.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>29 Section floating and positioning operation </title>
		<link rel="stylesheet" type="text/css" href="css/homework.css"/>
	</head>
	<body>
		<div class="pro_list">
			<!--  Fast generation method ：(div.item>img)*6+Tab -->
			
				<div class="item">
					<img src="img/img01.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img02.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img03.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img04.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img05.jpg" alt="">
					<div class="box5">
					</div>
					</div>
				<div class="item">
					<img src="img/img06.jpg" alt="">
					<div class="box5">
					</div>
					</div>
			
		</div>
	</body>
</html>

homework.css

.pro_list{
	width: 75rem;
	border: 0.0625rem solid pink;
	overflow: hidden;
	
}
.item{
	width: 23.75rem;
	height:14.375rem;
	float: left;
	position: relative;
}
.box5{
	/* 100% It means the same width and height as the parent class  */
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	/* rgba(,,,) The first is the red value , The second is the green value , The third is the blue value ,1~255 The fourth is transparency alpha Color space  */
	position: absolute;
	top:0;
	left:0;
}
.item:hover .box5{
	/* hover There must be a space after  */
	background-color: rgba(0,0,0,0.2);
	
}