Struggling all day while designing a CSS site, trying to hide one part of an image when it overflows and keep another part visible, in addition to moving the image up and down. Here's the HTML code snippet:
<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]
Check out the CSS code responsible for styling this section:
.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;
}
No similar question found regarding this issue.