此时，图像在黑色文本容器上zoom .我该如何防止这种情况？我只希望图像在自己的容器中放大，而不是覆盖黑色div容器.
这是一个JSFiddle和我的代码:
.cms-section-default.boxed [class*="cms-element"] {
border-radius: 3px;
}
.body-selection-item {
overflow: hidden;
text-overflow: ellipsis;
margin: 0.8em 0.5em 0.2em 0.5em;
text-align: center;
-ms-flex-positive: 1;
flex-grow: 1;
background-color: white;
border: 1px solid #b2b2b2;
}
.body-selection-item-image:hover {
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.body-selection-item-image {
overflow: hidden;
transition: -ms-transform .5s ease;
transition: -webkit-transform .5s ease;
transition: transform .5s ease;
-webkit-transition: -webkit-transform .5s ease;
}
.body-selection-item-image {
height: 15rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
}
.body-selection-item-text {
font-size: 1rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0.5em;
background: #1f1f1f;
color: #fff;
}<div class="cms-element-text">
<div class="body-selection-item">
<a title="Ttile" href="#">
<div style="background-image:url(https://images.unsplash.com/photo-1657053543559-5845ec792c0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3351&q=80);" class="body-selection-item-image"></div>
<div class="body-selection-item-text">MY TEXT-BOX</div>
</a>
</div>
</div>