I have been trying to implement a hover effect on the after pseudo-element itself, where its background changes when hovered over. However, my CSS code does not seem to be having any effect:
.card::after:hover {
filter: drop-shadow(30px 10px 4px #4444dd);
background-color: red;
}
This is for a card design, and I want the "Check it out" pseudo-element to change its background and display a shadow upon hovering over it. Is there a way to achieve this functionality?
.card {
--fs-card: 1.2rem;
background-color: var(--clr-light);
width: 200px;
height: 90%;
max-height: 31.25rem;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 5px;
box-shadow: 3px 3px 8px rgb(0, 0, 0);
overflow: hidden;
justify-content: space-between;
position: relative;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card:hover {
transform: scale(1.05);
}
.card::after {
opacity: 0;
content: "Check it out";
font-family: "Myriad pro";
font-size: 1.2rem;
position: absolute;
z-index: 3;
left: 3px;
top: 3px;
background-color: #0c44ddd2;
color: var(--clr-light);
border-radius: var(--btn-border-radius);
padding: 0.1rem 0.6rem;
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card:hover::after {
opacity: 1;
}
.card::after:hover {
filter: drop-shadow(30px 10px 4px #4444dd);
background-color: red;
}
.article-img-container {
height: 60%;
width: 100%;
background-color: white;
}
.article-img {
object-fit: contain;
object-position: center;
height: 100%;
width: 100%;
}<div class="card">
<div class="article-img-container">
<img
class="article-img"
src="https://files.refurbed.com/ii/apple-watch-series-6-alu-40mm-1613627678.jpg?t=resize&h=600&w=800"
alt=""
/>
</div>
<div class="article-info-container">
<p class="article-title">Smart Watch S6</p>
<p class="article-price clr-primary">€ 266.99</p>
</div>
<button class="btn btn-card">ORDER NOW</button>
</div>