I am making a website to download wallpapers. On the home page, I want to create a hover effect on the image so I can add a "like" and "add" to the collection button. Here's the reference: I have the hover effect that I want but I want to be able to click on the image so that the user can go to a download page. But I can't seem to add an anchor tag after I added the hover effect.
The HTML code for a single image:
.card {
overflow: hidden;
position: relative;
width: 400px;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
color: #fff;
opacity: 0;
padding: 15px;
transition: opacity 0.25s;
}
.image-overlay--blur {
backdrop-filter: blur(5px);
}
.image-overlay:hover {
opacity: 1;
}
.image-overlay>* {
transform: translateY(-20px);
transition: transform 0.25s;
}
.image-overlay:hover>* {
transform: translateY(0);
}<div class="container-fluid mt-4">
<div class="row">
<div class="card ml-4 bg-dark" style="width: 30rem;" data-aos="fade-left">
<img src="img/1.png" class="card-img-top " alt="...">
<div class="image-overlay image-overlay--blur">
<div class="card-text">
<button type="button" class="btn btn-outline-danger mr-2">Like</button>
<button type="button" class="btn btn-outline-light mr-2">Add</button>
</div>
</div>
</div>