CSS card structure front and back - opacity animation not working?

Question

I have a grid of images that when I hover over them, the image opacity reduces to display a div exactly under the image with a clickable link. I haven't been able to click the link when the image lightens. I'm also not sure how to target the hover on one div and then affect another divs style. I haven't included the img-grid container which houses all the 'press-info' divs. here is a snippet of my code.

press-info {
   width: 350px;
   height: 460px;
   padding: 1.5rem;
   /* border: 1px solid blue; */

}

.card {
   position: relative;
   width: 100%;
   height:100%;
   /* border: 1px solid green; */
}

/* card front styling */


.face.front{
   /* border: 1px solid red; */
   position: absolute;
   width: 100%;
   height: 100%;
   transition: opacity 1s;

}


.front img {
   width: 100%;
   height: 100%;
}

<div class="press-info">
           <div class="card">
              <div class="back face">
                 <a href="https://oddamagazine.com/project/fashions-future-designers/" `target="_blank">ODDA MAGAZINE`
                    : FASHION'S
                    FUTURE
                    DESIGNERS<br><span>⬈</span></a>
              </div>
              <div class="front face">
                    <img src="press/press-1.png">
                 </div>
             </div>
        </div>