.image-div {
    position: relative;
    width: 500px; /* 设置div的宽度 */
    height: 300px; /* 设置div的高度 */
    /*background: #0a53be;*/
    background-image: url('../img/1.png'); /* 替换为你的图片路径 */
    background-size: cover; /* 图片覆盖整个div */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 图片不重复 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
    cursor: pointer; /* 鼠标悬停时显示为小手 */
}

.image-div::before {
    content: ""; /* 伪元素内容为空 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(198, 191, 191, 0.7); /* 遮罩层颜色，半透明红色 */
    opacity: 0; /* 初始状态遮罩层不可见 */
    transition: opacity 0.3s ease; /* 平滑过渡效果 */
    z-index: 1; /* 确保遮罩层在内容之上 */
}

.image-div:hover::before {
    opacity: 1; /* 鼠标悬停时遮罩层变为可见 */
}

.image-div h2,
.image-div p {
    position: relative; /* 确保内容不受遮罩层影响 */
    z-index: 2; /* 确保内容在遮罩层之上 */
    color: white; /* 设置文字颜色为白色，以便在遮罩层上可见 */
    text-align: center; /* 文字居中显示 */
    padding-top: 50px; /* 根据需要调整文字位置 */
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
    width: 100%;
    height: auto;
}

.image-container .overlay {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* 覆盖层背景色 */
    color: #fff; /* 文本颜色 */
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.image-container:hover .overlay {
    opacity: 1;
}

.image-container .overlay a {
    color: white; /* 链接文本颜色 */
    text-decoration: none; /* 去除链接下划线 */
    font-size: 20px; /* 链接文本大小 */
    padding: 10px 20px; /* 链接内边距 */
    background-color: rgba(255, 255, 255, 0.3); /* 链接背景色，半透明 */
    border-radius: 4px; /* 链接边框圆角 */
    transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

.image-container .overlay a:hover {
    background-color: rgba(255, 255, 255, 0.5); /* 鼠标悬停在链接上时改变背景色 */
}