.main {
background-color: transparent;
width: auto;
position: relative;
height: 100%;
}
.center_content {
padding: 0;
background-color: #ebeced;
margin: 0 auto;
}
.container_itemlist {
min-height: 200px;
position: relative;
}
#item-list {
max-width: 975px;
/*margin-left: 0px;
margin: 0 auto;*/
}
.hotellist {
min-height: 578px;
}
.item {
position: relative;
display: -webkit-flex;
display: flex;
width: 100%;
margin-bottom: 8px;
box-shadow: 0 1px 4px rgba(41,51,57,.5);
color: #37454d;
background: #fff;
}
.item_wrapper {
width: 100%;
position: relative;
}
ol {
list-style-type: none;
padding: 0;
}
.image-wrapper:before {
content: "";
display: block;
padding-top: 100%;
}
.item_image {
position: absolute;
top: 0;
width: 100%;
height: auto;
left: 0;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.image-area {
padding: 8px 6px 8px 8px;
width: 22.25%;
float: left;
}
.image-wrapper {
position: relative;
line-height: 0;
overflow: hidden;
}
.image-wrapper:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.image_gallery {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 0;
margin: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
opacity: 0;
display: block;
background: 0;
position: absolute;
cursor: pointer;
padding: 0;
border:0;
}
.image_gallery:hover {
opacity: 1;
}
.text_wrapper {
left: 0;
right: 0;
bottom: 0;
position: absolute;
height: 71.5%;
background-image: -webkit-linear-gradient(top,transparent,rgba(0,0,0,.25) 60%,rgba(0,0,0,.75));
background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.25) 60%,rgba(0,0,0,.75));
}
.image_text {
color: #fff;
font-weight: 700;
line-height: normal;
padding-top: 16px;
font-size: 14px;
bottom: 8px;
left: 0;
right: 0;
position: absolute;
}<div class="main">
<div class="center_content">
<div class="container_itemlist">
<section id="item-list">
<ol class="hotellist">
<li class="item-order">
<article class="item">
<div class="item_wrapper">
<div class="image-area">
<div class="image-wrapper">
<img src="http://imgec.trivago.com/itemimages/44/39/443961_v1_isq.jpeg" class="item_image">
<button type="button" class="image_gallery">
<span class="text_wrapper">
<span class="image_text">View images</span>
</span>
</button>
</div>
</div>
</div>
</article>
</li>
</ol>
</section>
</div>
</div>
</div>为什么悬停时图片超出了块我需要它在块内增加，如图所示，而不是超出块。在父元素Overflow hidden中，我指出正确，我不知道我做错了什么。请帮忙
因为您需要裸露容器内部的东西
item_image，而不是容器本身image_wrapper。PS：由于您的按钮应该在图片的顶部，在工作版本中，悬停应该在按钮上，以便放大图片。在 html 中交换他们的按钮和图像，然后您可以在 css - 中设置选择器
button:hover + img {}。将您的图像设置
transition: all 1s ease-out;为 ，并在悬停时添加transform: scale(1.1);