Html and CSS how to make image with hover effect a hyperlink - html

Question

Hi so I'm quite new to programming and I have a basic knowledge in html and an even more basic knowledge of CSS. I've been trying to make images for my wordpress.com website that when hovered over by the cursor change to an overlay with text. I've managed to find some samples for what I want and I've gotten pretty close. The only thing I don't know how to do is make it so my image is also a hyperlink because currently all it has is the hover effect.
Here is my CSS code:
.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;
}
Here is my html code:
<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>
So to summarize I want to know what to add to my code in either CSS or html to make it so the image also acts as a hyperlink to another page.

Answer 1

Just wrap everything inside an <a> tag, like this:
<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

I think it can help you.
.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>