覆盖HTML超链接的CSS样式

Question

我有一个悬停效果，在一个图像上创建一个标签，该图像也是到一个单独网站的超链接，但是，悬停效果CSS样式阻止了我到另一个网站的HTML超链接。

在我当前项目的一个部分中，我将图像与多个其他图像对齐，每当我更改div以创建链接时，它都会使与中心不对齐。

有没有一个快速的解决方案可以让我的图像在CSS网格中居中，还可以让整个<div class="big-image">成为超链接，而不仅仅是标签后面的图像？

以下是可供参考的代码块：

#projects{
background-color: var(--main-bg-color);
/* Test color: #D7D427 */
display: grid;
grid-template-columns: 1.25fr 2fr 1.25fr;
grid-template-rows: 10% 1fr 1fr 1fr ;
margin: 0;
box-sizing: border-box;
justify-items: center;
align-items: center;
}
#work-title{
grid-column-start: 2;
grid-column-end: 3;
}
.img1{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
max-width: 100%;
max-height: 100%;
}
.img2{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.img3{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 5;
max-width: 100%;
}
.img4{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
max-width: 100%;
}

.big-image{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
max-width: 100%;

}
/* Image Borders */
.img1 img, .img2 img, .img3 img,.img4 img, .big-image img{
border: 3px solid var(--blue-border);
border-radius: 25px;
}
/* Image/Project :hover effects for Labels */
.big-image {
position: relative;

}
.big-label{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: var(--primary-color);
font-family: Verdana, Geneva, Tahoma, sans-serif ;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
border-radius: 25px ;
transition: opacity 0.25s;
/* pointer-events: none; */
}
.big-label > *{
transform: translateY(20px);
transition: transform 0.25s;
}
.big-label:hover{
opacity: 1;
}
.big-label:hover > *{
transform: translateY(0);
}
.big-label-title{
font-size: 2em;
font-weight: bold;
}
.big-label-description{
font-size: 1.25em;
margin-top: 0.25em;
}

<a href="https://mberti13.github.io/run-buddy/">
<div class="big-image">
<img id= "big-image" src="./assets/images/run-buddy-photo.jpg" width="500px" height="350px" alt="Website built for Run Buddy Inc. Made Using HTML and CSS">
<div class="big-label">
<div class="big-label-title">
<h3>Run Buddy</h3>
</div>
<div class="big-label-description">
<h5>HTML, CSS</h5>
</div>
</div>
</div></a>

Answer 1

这一行是一个问题：<h3><a href="https://mberti13.github.io/run-buddy/"></a>Run Buddy</h3>

你必须把文本放在锚链接的内部。就像这样：<h3><a href="https://mberti13.github.io/run-buddy/">Run Buddy</a></h3>