Html 缩放响应容器内的图像

所以我正在开发一个移动友好的布局，只有正方形和矩形。它有带图片和说明的缩略图。为了在视觉上更具动感，我想在缩略图上制作一个悬停效果

问题是，

img

容器是一个响应对象，当它缩放以产生放大效果时，它也会缩放其容器

有没有办法只缩放

img

而不缩放其容器

这是迄今为止我得到的不希望的效果：

.tile{
位置：相对位置；
宽度：50%；
浮动：左；
背景大小：100%；
背景重复：无重复；
-webkit过渡：全部。4s轻松；
过渡：全部。4s轻松；
}
.瓷砖：之后{
内容：“；
显示：块；
填充顶部：100%；
}
.瓷砖img{
显示：块；
位置：绝对位置；
过渡：全部。4s轻松；
}
.tile:悬停img{
转换：比例（1.5）；
}

---

将

溢出：隐藏添加到平铺类。
将
溢出：隐藏添加到平铺类