Html 在css中使用translate属性时，文本变得模糊

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

.box卡{
宽度：100%；
填充：10px 10px 30px 10px；
最小高度：140px；
边缘底部：20px；
-webkit过渡：所有.3s轻松；
过渡：全部。3秒轻松；
}
img{宽度：300px；高度：200px；}
.盒式卡片：悬停{
-webkit转换：规模（1.05）；
转换：标度（1.05）；
-webkit过渡：所有.3s轻松；
过渡：全部。3秒轻松；
溢出：隐藏；
}

你好

将悬停样式添加到方框图像而不是方框卡，请选中下面的复选框

风格

.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;
                }

多姆

你好

试试这个

使用

.box image

代替

。box卡：悬停

.box卡{
宽度：100%；
填充：10px 10px 30px 10px；
最小高度：140px；
边缘底部：20px；
-webkit过渡：所有.3s轻松；
过渡：全部。3秒轻松；
}
img{
宽度：300px；
高度：200px；
}
.box图像：悬停{
-webkit转换：规模（1.05）；
转换：标度（1.05）；
-webkit过渡：所有.3s轻松；
过渡：全部。3秒轻松；
溢出：隐藏；
}

你好

您必须更改

。方块卡img:hover

而不是

。方块卡：hover

.box卡{
宽度：100%；
填充：10px 10px 30px 10px；
最小高度：140px；
边缘底部：20px；
-webkit过渡：所有.3s轻松；
过渡：全部。3秒轻松；
}
img{宽度：300px；高度：200px；}
.box卡img：悬停{
-webkit转换：规模（1.05）；
转换：标度（1.05）；
-webkit过渡：所有.3s轻松；
过渡：全部。3秒轻松；
溢出：隐藏；
}

你好

share

html

code也显示工作小提琴please@Dr.Strange用演示更新的帖子不起作用。我希望整个部分都有上升的效果，不仅图像不会工作。我希望整个部分都有上升效果，不仅仅是图像，所以当图像是缩放效果时，文本也有缩放效果，你不能在其中做任何事情。@sun不会工作。我希望整个部分不仅有图像上升效果如果你想要整个div，文本也会因为你的缩放效果而放大看起来很像的图像。如果您希望文本大小相同，只需在图像上添加效果即可。

   <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>