gpt4 book ai didi

HTML 和 CSS,悬停时在其容器内缩放图像

转载 作者:行者123 更新时间:2023-12-02 18:08:00 25 4
gpt4 key购买 nike

<分区>

此刻,图像在黑色文本容器上放大。我怎样才能防止这种情况发生?我只希望图像在其自己的容器中放大,而不是覆盖黑色的 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>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com