html - 在 css 中使用翻译属性时文本变得模糊

Question

我有一个部分包含图像和一些文本。我想要的是将鼠标悬停在一个 div 上，它应该对 div 本身显示很少的上升动画效果。它正在运行，但在播放动画时，我注意到文本的大小发生了一点变化。

.box-cards {
            width: 100%;
            padding: 10px 10px 30px 10px;
            min-height:140px;
            margin-bottom:20px;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
 }
 
 img{width:300px; height:200px;}
 
 .box-cards:hover{
                -webkit-transform: scale(1.05);
                transform: scale(1.05);
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
                overflow: hidden;
            }

<div class="box-cards">
        <div class="box-image">
            <img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
        </div>
    
        <div class="box-content">
            <h3>Hello there</h3>
        </div>
    </div>

Answer 1

将悬停样式添加到 box-image 而不是 box-cards，检查下面

样式

.box-cards {
                width: 100%;
                padding: 10px 10px 30px 10px;
                min-height:140px;
                margin-bottom:20px;
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
     }

     img{width:300px; height:200px;}

     .box-image:hover{
                    -webkit-transform: scale(1.05);
                    transform: scale(1.05);
                    -webkit-transition: all .3s ease;
                    transition: all .3s ease;
                    overflow: hidden;
                }

主场

   <div class="box-cards">
            <div class="box-image">
                <img src="https://cdn-images-1.medium.com/max/660/1*WgROsTKa6diRYTG5K0R5mw.jpeg" class="img-responsive post-image" />
            </div>
                 <div class="box-content">
                <h3>Hello there</h3>
            </div>
        </div>