在悬停时将文本转换为图像

Question

我试图在悬停时将文本转换为图像，一切都很好，但图像没有完全转换。这是我的代码：

https://jsfiddle.net/kvmyb4ot/2/

HTML：

<div class="flex-container">
    <div class="flex-item">
         <a href="ArchitectureWork.html">
             <img src="http://milenanimuje.com/wp-content/uploads/2019/03/animacja.png" width="160" height="160" alt="">
         </a>
         <a href="ArchitectureWork.html"><h3 style="text-align: center;">Tekst1</h3></a>
    </div>
 </div>

CSS：

.flex-item > a:first-child         { display: none; }
.flex-item:hover > a:first-child   { display: inline; }
.flex-item:hover > a:last-child    { display: none; }
.flex-container                    { display: flex; }
.flex-item{
background:#f0dcdd;
animation-name: bounceInLeft;
animation-duration: 1s;
animation-fill-mode: both;
padding-top: 70px !important;
padding-bottom: 70px !important;
padding-left: 70px;
padding-right: 70px;
}

Answer 1

我想你应该将你的填充规则重构为：padding: 70px并添加一条新规则：.flex-item:hover { padding: 0 }