css实现多个图片鼠标经过是白色渐变
CSS
2025-02-23 11:15
60
0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Popup</title>
<style>
body {
font-family: Arial, sans-serif;
}
.small-image {
cursor: pointer;
transition: 0.3s;
}
.small-image:hover {
opacity: 0.7;
}
.popup {
display: none;
position: fixed;
z-index: 1;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.popup-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close-btn {
position: absolute;
top: 20px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close-btn:hover,
.close-btn:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
</style>
<script>
// Get the popup and the image inside it
var popup = document.getElementById("popup");
var popupImg = document.getElementById("popup-img");
// Get the small image and attach a click event to it
var smallImg = document.querySelector(".small-image");
smallImg.onclick = function() {
popup.style.display = "block";
popupImg.src = this.src;
}
// Get the close button and attach a click event to it
var closeBtn = document.querySelector(".close-btn");
closeBtn.onclick = function() {
popup.style.display = "none";
}
// Close the popup when clicking outside the image
popup.onclick = function(event) {
if (event.target === popup) {
popup.style.display = "none";
}
}
</script>
</head>
<body>
<div>
<img src="https://i-operation.csdnimg.cn/images/22dc0f4dfbad4f5d9a77f130e17a8d92.png" alt="Small Image">
<img src="https://img2024.cnblogs.com/blog/35695/202502/35695-20250207193659673-708765730.jpg" height="300" alt="点击查看大图">
</div>
<div id="popup">
<span>×</span>
<img id="popup-img">
</div>
</body>
</html>
