I want to code the active state of the anchor tag to change the overlay class opacity to 1. I am only able to do that using the :hover pseudo with the image to achieve this. Once try to use the link (anchor tag) in styling the image doesn't appears as a link anymore.
.card{
order: -1;
justify-content: center;
position: relative;
}
.card > a{
display: block;
position: relative;
}
.card a img{
display: block;
max-width: 100%;
width: 90%;
height: 50%;
border-radius: 20px;
/* align-self: center; */ /* centert the image cross-wise (horizontally) */
padding: 12px;
/* margin-top: 12px;*/
}
.overlay {
position: absolute;
top: 12px;
bottom: 12;
left: 12px;
right: 12;
height: 92%;
width: 90%;
opacity: 0;
transition: .5s ease;
background-color: #00FFF8;
border-radius: 13px;
}
.card > a:active .overlay{
opacity: 0.6;
}<body>
<section id="card_details">
<h1><a href="#">Equilibruim #3429</a></h1>
<p>Our Equilibruim collections promotes balance and calm.</p>
<div class="card">
<a href="#" aria-label="clink" class="cardlink"><img src="images/nft.jpg" alt="" class="image"></a>
<div class="overlay">
<div class="eye">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><g fill="none" fill-rule="evenodd"><path d="M0 0h48v48H0z"/><path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="#FFF" fill-rule="nonzero"/></g></svg>
</div>
</div>
</div>The only way I'm getting the overlay to work is with this css below;
.card:hover .overlay{
opacity: 0.6;
}