I'm trying to code a little 'card' that has an image, which when you hover in, it fades the image out and shows up a button which I'm trying to make clickable. The problem is that the button cannot be clicked since it's under the image and when you click on it, it registers as a click on the image. I know I could make it so the user can just click the image, but that doesn't work well on mobile since you cannot hover without clicking.
Here's my HTML: (note: this is a basic version of my actual cards)
.center {
text-align: center;
}
img.rounded-corners {
border-radius: 30px;
background-color: rgba(29, 30, 40, 1);
}
.btn btn-primary {
position: absolute;
top: 50%;
}
.card {
//background: #1D1E28;
background-color: transparent;
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
}
.card img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card img:hover {
opacity: 0;
}<div class="card" style="height: 18rem; width: 18rem;">
<img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="...">
<div class="card-body" style="height: 172px;">
</div>
<div class="card-body">
<button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">Manage server</button>
</div>
</div>The solution what i see might be if hover handler will be on the .card:hover img not the .card img:hover. And remove form the image event with pointer-events: none;
.card:hover img {
opacity: 0;
pointer-events: none;
}
document.querySelector('button').addEventListener('click', ev => {
console.log('click');
ev.target.textContent = 'cliked';
});.center {
text-align: center;
}
img.rounded-corners {
border-radius: 30px;
background-color: rgba(29, 30, 40, 1);
}
.btn btn-primary {
position: absolute;
top: 50%;
}
.card {
background: #1d1e28;
background-color: transparent;
position: relative;
height: 500px;
width: 500px;
margin: 0 auto;
}
.card img {
position: absolute;
left: 0;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card:hover img {
opacity: 0;
pointer-events: none;
}<div class="card" style="height: 18rem; width: 18rem">
<img src="https://icon-library.com/images/black-discord-icon/black-discord-icon-19.jpg" class="card-img-top rounded-corners guildimg" alt="..." />
<div class="card-body" style="height: 172px"></div>
<div class="card-body">
<button class="btn btn-primary btn-lg manage-btn" target="_blank" role="button">
Manage server
</button>
</div>
</div>