我在做一个网站在css和麻烦了一整天，使图像的一部分隐藏时，它溢出和另一部分不，也移动图像上下. 以下是HTML代码:

    <section class="next-gen">
    <div class="text-content">
        <h1>Next generation <br>
            digital banking</h1>
        <p>Take your financial life online. Your Easybank account <br> will be a one-stop-shop for spending,
            saving,<br>
            budgeting, investing, and much more.</p>
        <button class="request-button">Request Invite</button>
    </div>
    <div class="image-content">
        <img src="images/bg-intro-desktop.svg" alt="" class="image-1">
        <img src="images/image-mockups.png" alt="" class="image-2">

    </div>
</section>[![enter image description here][1]][1]

这是此div的css:

 .next-gen{
    
    padding-left: 10%;
    background-color: hsl(0, 0%, 98%);
    font-family: "Public Sans", sans-serif;
    display: flex;
    height: 450px;
}
.text-content p{
    padding-top: 10px;
    padding-bottom: 10px;
    color: hsl(233, 8%, 62%);
}
.image-content {
    position: absolute;   
    left: 1000px;
    overflow: hidden;
   
}

.image-2 {
  position: absolute;
  right: 250px;
  bottom: 210px;
  z-index: 5;
 }

This is what is currently displayed on the site:

And this is expected outcome:

当前问题:

我没有发现类似的问题.