Tips for shifting an image upwards and extending it beyond one section while keeping the other section unaffected

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.

Answer №1

To start, it seems like you are working with two different images. One is Image-1 for the background and the other is Image-2 for the phones.

.image-content {
    position: absolute;   
    right: 0;
    height: 100%;
    background-image: url("images/bg-intro-desktop.svg");
}

.image-2 {
  position: absolute;
  right: 0;
  bottom: /*align it so that it comes in the center of the main div*/
  z-index: 5; /*Less Than your z-index of nav if have if not add a higher z-index than this to your nav*/
 }

Next, make sure that the div containing the text and button has:

position: relative;

Also, consider using min-width instead of width IF HAVE.

This should resolve any issue you are facing, but if not, please provide additional information about the specific div where the text and button are located.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Achieving Vertical Center Alignment in CSS

I'm having trouble understanding what's happening here: My goal is to vertically center an iframe and another div, both positioned alongside each other horizontally. What I've attempted is placing the iframe and div inside a new div called ...

Customize button design with data from API request

I am currently working on a project to showcase the status of multiple servers within a cluster. To achieve this, I have established a status route in my web service that returns 'ok' if the server is functioning correctly and an error message if ...

What is the best way to arrange elements above and below each other in a single flexbox container?

Currently, I am facing a challenge aligning the number 238,741 and the letter N in Number. There is a padding between the Prize Pool div and the Number Active div. All of these elements are enclosed within a parent container with display set to flex and fl ...

Creating a Website for Compatibility with NoScript

During my journey of building a nameplate site from the ground up for myself, I have delved into the realms of learning and establishing my online presence. The highlight of my project is a sleek tabbed site that employs AJAX and anchor navigation to seaml ...

the div background is limited to the exact size of the text, not filling the entire

Currently, as I work on my web page using react.js, I'm facing the challenge of implementing a full-size background. Despite my efforts, the background only occupies the size of the text within the div. Here is the snippet of code I am working with: a ...

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

"Is it possible to draw on top of a canvas element that's already been

I'm currently working with an OpenLayers map that includes WMS layers with time steps. My goal is to create a loop that updates the time for each step and then saves the image once it's rendered. I've been referencing the example code from t ...

There seems to be a compatibility issue between Angular 16 and Bootstrap 5 styling

In my angular.json, I have defined my styles in the following way: "styles": [ { "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", "bundleName": "ltrCSS" }, { "input": "node_mod ...

Create a custom loading spinner for a jQuery AJAX request

How can I add a loading indicator to my Bootstrap modal that is launched from a link? Currently, there is a 3-second delay while the AJAX query fetches data from the database. Does Twitter Bootstrap have built-in functionality for this? UPDATE: Modified J ...

Move an object in relation to the right boundary of the viewport

I have a div that starts off the screen due to this CSS code: transform: translateX(100%); Now, I am looking to bring this div back into view by a specific distance from the right side. Although I have tried using transform: translateX(-450px), it seems ...

Applying a specified style to a pseudo element using the ::after selector to display an

Can anyone help me with adding a pseudo element ::after containing an icon (from FontAwesome) to my Bootstrap Vue ProgressBar? I want this icon to be dynamic and move along the progress bar line when I click. Here is my current implementation, where the Pr ...

Navigating to User's Specific Info Page using Node.js

Would love some input on my current issue. I have a table featuring a list of users, and my goal is to display user information in detail whenever a user (which corresponds to a row in the table) is clicked. The process involves identifying which user was ...

Looping through items using ng-repeat according to the chosen option in a select dropdown

After expanding my project, I encountered an issue with the main object structure: { screens: [{ id: 0, name: 'Screen0', sections: [{ id: 0, sectionItems: [] }, { id: 1, sectionItems: [] }, { i ...

Is it possible for jquery to run an entire HTML file using ajax?

Based on information from a discussion on Stack Overflow, it seems that I can utilize the jquery getScript() method to run a remote JavaScript file loaded via Ajax. However, in my specific scenario, the script file is located within an HTML file. Is ther ...

Revamp the appearance of angular material inputs

I have been working on customizing the style of an Angular Material input. So far, I successfully altered the background-color with the following code: md-input-container { padding-bottom: 5px; background-color: #222; } I also changed the placeh ...

Remove a table along with its contents from HTML code using PHP

I'm working with some HTML code that includes a table, and I need to completely remove the table and its contents using PHP. While I know how to strip the table tags using PHP's strip_tags function, I'm not sure how to delete the table conte ...

Displaying an image on canvas while showing a loading progress bar

I'm attempting to utilize this function to load an image into my canvas: function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { var img = new Image(); // img.onprogress = function (e) { ...

Is it possible to disregard any spaces within the content of an <option> element?

In my current project, I am facing an issue where a Django server is sending JSON data to a template with Vue.js running on it. The problem arises from the fact that some values in the JSON data have trailing spaces, causing complications. I am looking for ...

How to properly display an Angular Template expression in an Angular HTML Component Template without any issues?

When writing documentation within an Angular App, is there a way to prevent code from executing and instead display it as regular text? {{ date | date :'short'}} Many sources suggest using a span element to achieve this: <span class="pun"&g ...