HTML 部分：
创建了多个 div 元素，每个 div 元素的类名为 thumbnail-container，作为缩略图的容器。
在每个 thumbnail-container 内部，包含一个 img 元素用于显示缩略图，以及另一个 div 元素（类名为 image-info）用于显示图片的标题和日期。
image-info 内部又包含两个 div 元素，分别用于显示标题（类名为 image-title）和日期（类名为 image-date）。
CSS 部分：
.thumbnail-container：设置为 inline-block 布局，使其可以水平排列。使用 position: relative 为子元素的绝对定位提供参考。overflow: hidden 用于隐藏图片放大时超出容器的部分。
.thumbnail：设置图片的宽度和高度，并使用 object-fit: cover 确保图片填充整个容器。transition: transform 0.3s ease 为图片的缩放效果添加过渡动画。
.thumbnail-container:hover .thumbnail：当鼠标悬停在缩略图容器上时，将图片放大 1.1 倍。
.image-info：使用 position: absolute 将其定位在缩略图的底部。设置背景颜色为半透明黑色，文字颜色为白色。初始状态下 opacity: 0 使其不可见，并添加过渡动画。
.thumbnail-container:hover .image-info：当鼠标悬停在缩略图容器上时，将图片信息的透明度设置为 1，使其显示出来。
.image-title 和 .image-date：分别设置标题和日期的字体大小。
JavaScript 部分：此示例中未使用 JavaScript，仅通过 CSS 的 :hover 伪类实现了鼠标悬停效果。
以下是一个使用 HTML、CSS 和 JavaScript 实现缩略图鼠标划过放大效果，并且带有标题和日期的示例代码。这个示例会详细添加中文注释，帮助你理解代码的每一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缩略图鼠标划过放大效果</title>
<style>
/* 定义缩略图容器的样式 */
.thumbnail-container {
display: inline-block;
margin: 10px;
border: 1px solid #ccc; /* 为容器添加边框 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
transition: transform 0.3s ease;
}
/* 鼠标悬停时，容器放大 1.1 倍 */
.thumbnail-container:hover {
transform: scale(1.1);
}
/* 定义缩略图图片的样式 */
.thumbnail {
width: 200px;
height: 150px;
object-fit: cover;
display: block; /* 去除图片底部的空隙 */
}
/* 定义图片信息容器的样式 */
.image-info {
padding: 10px;
background-color: #f9f9f9; /* 设置背景颜色 */
}
/* 定义图片标题的样式 */
.image-title {
font-size: 16px;
margin-bottom: 5px;
}
/* 定义图片日期的样式 */
.image-date {
font-size: 12px;
color: #888; /* 设置日期颜色 */
}
</style>
</head>
<body>
<!-- 第一个缩略图容器 -->
<div>
<!-- 缩略图图片 -->
<img src="https://www.cnzv.cc/?200x150" alt="示例图片 1">
<!-- 图片信息容器 -->
<div>
<!-- 图片标题 -->
<div>示例图片标题 1</div>
<!-- 图片日期 -->
<div>2024-01-01</div>
</div>
</div>
<!-- 第二个缩略图容器 -->
<div>
<img src="https://www.cnzv.cc/?200x150" alt="示例图片 2">
<div>
<div>示例图片标题 2</div>
<div>2024-02-01</div>
</div>
</div>
</body>
</html>
发表评论