CSS卡结构的正面和背面-不透明度动画不起作用？

问题描述

我有一个图像网格，当我将鼠标悬停在图像网格上时，图像不透明度会降低，从而可以通过单击链接将div恰好显示在图像下方。图像变亮时，我无法单击链接。我也不确定如何将鼠标悬停在一个div上，然后影响另一个div样式。我没有包含容纳所有“ press-info” div的img-grid容器。这是我的代码段。

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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）