title: CSS card structure front and back - opacity animation not working?
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/H2MbA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H2MbA.jpg" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="press-info"&gt;
             &lt;div class="card"&gt;
                &lt;div class="back face"&gt;
                   &lt;a href="https://oddamagazine.com/project/fashions-future-designers/" `target="_blank"&gt;ODDA MAGAZINE`
                      : FASHION'S
                      FUTURE
                      DESIGNERS&lt;br&gt;&lt;span&gt;⬈&lt;/span&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="front face"&gt;
                      &lt;img src="press/press-1.png"&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>