老兄，你的代码太乱了。为什么每个元素有5个类？天哪。在这里你甚至没有发布悬停风格。
试图将一张卡扩展到其父卡和其他div的大小之外，但没有成功。
一旦你悬停一张卡片，它应该会放大屏幕的一部分高度。到目前为止，我得到的结果要么是把牌缩放到一个固定的位置，要么是非常不稳定，要么是升级得很好，但不是完全可见。
知道如何解决这个问题吗？
CodePen
.iZNdlS {
z-index: 200;
position: relative;
flex-direction: column;
background-color: rgb(255, 255, 255);
border-radius: 4px;
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
flex-shrink: 0;
min-width: 300px;
max-width: 300px;
min-height: 490px;
max-height: 490px;
transition: transform 0.7s ease 0s;
transform-origin: center top 0px;
}
请在发布问题之前仔细检查，因为您可能会发现错误，否则会让试图回答您问题的人感到困惑。当我试图阅读这个问题时，我发现它非常不清楚，甚至发现句子的部分内容完全缺失。但据我所知，你正试图将卡片缩放到比其父元素更大的大小。如果是这种情况，代码如下。
body {
margin: 0;
}
.container {
width: 100%;
height: 100%;
padding-top: 100px;
padding-bottom: 100px;
text-align: center;
}
.card {
display: inline-block;
margin: 10px;
width: 300px;
height: 450px;
background-color: white;
border: 1px solid black;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
overflow: hidden;
transition: .2s;
}
.card:hover {
transform: scale(1.3);
}
.image {
width: 300px;
height: 300px;
margin-bottom: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="card">
<image src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=pexels-pixabay-45201.jpg&fm=jpg" class="image" >
<span>Cat</span>
</div>
<div class="card">
<image src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=pexels-pixabay-45201.jpg&fm=jpg" class="image" >
<span>Cat</span>
</div>
<br>
<div class="card">
<image src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=pexels-pixabay-45201.jpg&fm=jpg" class="image" >
<span>Cat</span>
</div>
<div class="card">
<image src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?cs=srgb&dl=pexels-pixabay-45201.jpg&fm=jpg" class="image" >
<span>Cat</span>
</div>
</div>
</body>
</html>我认为你的规模不起作用的原因是因为父级有overflow: hidden，这会使任何超出父级边界的内容消失，但我不知道情况是否如此，因为你的CSS长得离谱，我没有时间浏览每一行代码来检查属性。希望这能有所帮助！
如果您想在悬停在卡片上时仅缩放图像：
HTML:
<div class="card">
<div class="card__image-holder">
<img src="https://loremflickr.com/cache/resized/65535_51923601496_2649a4c0ce_320_240_nofilter.jpg" alt="my-cat">
</div>
<div class="card__content">
<h3>My Cat</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit ut repellendus veniam, etcorrupti iusto sequi repellat pariatur commodi est iure repudiandae?</p>
</div>
</div>
CSS：
.card {
background: #FFF;
width: 300px;
height: auto;
overflow: hidden;
border-radius: 8px;
}
.card__image-holder {
width: 100%;
overflow: hidden;
}
.card__image-holder img {
width: 100%;
height: auto;
display: block;
margin: 0;
transition: transform 0.4s;
}
.card__content {
padding: 0 20px 20px;
}
.card:hover .card__image-holder img {
transform: scale(1.2);
}
关键是添加图像包装和溢出：隐藏到那个包装器，这样图像就不会在包装器之外缩放，而是在卡片悬停时应用图像的转换。
这是jsfiddle：https://jsfiddle.net/g7256y1a/1/
根据我在您的codePen中看到的情况，您面临的切割第一个容器的问题是因为.kjqkcL类上的margin-left: 100px。
如果您将其改为padding-left: 100px，它应该可以正常工作。
无论如何，我检查了你的代码，终于找到了它。你可以通过使悬停上的卡z-index高于其父卡来做到这一点。我试过100，但没用。然后我尝试了1000，它成功了。
.iZNdlS:hover {
transform: scale(2);
z-index: 1000;
}
另外，你的规模太大了。边缘上的卡片需要足够的空间，否则它们将被裁剪。为了解决这个问题，减少scale，并给父母足够的padding来在边上展示卡片。