Html和CSS如何使具有悬停效果的图像成为超链接

Question

嗨，我对编程很陌生，对html有基本的了解，对CSS也有更基本的了解。我一直在尝试为我的wordpress.com网站制作图像，当光标悬停在上面时，它会变成一个文本覆盖。我已经设法找到了一些我想要的样品，而且我已经很接近了。我唯一不知道怎么做的就是制作它，所以我的图像也是一个超链接，因为目前它只有悬停效果。

这是我的CSS代码：

.container {
position: relative;
width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.projeto01 {
color: white;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

这是我的html代码：

<div class="grid-portefolio">

<div class="container">
<img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/>
<div class="overlay">
<div class="projeto01">Albert Lee<br>Banks Electorate</div>
</div>
</div>

总之，我想知道在CSS或html中添加什么，使其成为另一个页面的超链接。

Answer 1

只需将所有内容包装在<a>标记中，如下所示：

<div class="container">
<a href="https://example.com/"><img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" class="image" alt="Albert Lee Banks Electorate"/>
<span class="overlay">
<span class="projeto01">Albert Lee<br>Banks Electorate</span>
</span>
</a>
</div>

Answer 2

我认为它可以帮助你。

.page-link {
position: relative;
width: 400px;
display: flex;
overflow: hidden;
}
.page-link img {
width: 100%!important;
height: auto;
transform: scale(1);
transition: transform .4s ease;
}
.projeto01 {
color: white;
font-size: 40px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 135, 186, .6);
opacity: 0;
transition: opacity .4s ease;
}
.page-link:hover {
cursor: pointer;
}
.page-link:hover img {
transform: scale(1.1);
}
.page-link:hover .projeto01 {
opacity: 1;
}

<div class="grid-portefolio">

<a class="page-link" href="https://www.example.com">
<img src="https://insert1australia.files.wordpress.com/2021/04/real-sinister-minister-14-250x250-1-1.png" alt="Albert Lee Banks Electorate"/>
<div class="projeto01">Albert Lee<br>Banks Electorate</div>
</a>