What is the best way to conceal the bottom portion of an image?

My image in the header overlaps with the next section's features (image-phone).

https://i.sstatic.net/4g0SO.jpg

I've tried changing the position and z-index types. If I crop the image, it's not ideal and difficult to fix ;)

How can I structure my image: using a div-class or just an img tag? In my code, I only used variables for img with class without div blocks. Is this clean?


       <div class="container">
           <nav id="main-nav">
               <ul class="menu">
                   <li><a href="#">Tour</a></li>
                   <li><a href="#">Features</a></li>
                   <li><a href="#">Pricing</a></li>
                   <li>
                       <h2 class="logo">NEWPROVIDENCE</h2>
                   </li>
                   <li><a href="#">Help</a></li>
                   <li><a href="#">Contact</a></li>
                   <a href="#" class="apple"><i class="fab fa-apple fa-1x"></i>Get app</a>
               </ul>
           </nav>

           <div class="showcase">
               <h1>What will happen tomorrow?</h1>   
               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, ex maxime! Natus earum praesentium officiis adipisci qui nisi ut, laboriosam labore optio. Non quidem assumenda dolore consectetur, corrupti quae delectus.</p>
               <a href="" class="video"><i class="fas fa-play"></i>Watch Video</a>
           </div>
           <img src="https://imgur.com/a/Ees14KN" class="phone-img" alt="">
       </div>
   </header>

   <section id="main-features">
       <div class="container">
           <div class="features">
               <div class="feature">
                   <i class="fas fa-clock fa-2x"></i>
                   <h2 class="m-heading">Real time all the time</h2>
                   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro sunt soluta praesentium earum iusto hic?</p>
               </div>
               <div class="feature">
                   <i class="fas fa-clock fa-2x"></i>
                   <h2 class="m-heading">Real time all the time</h2>
                   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro sunt soluta praesentium earum iusto hic?</p>
               </div>
           </div>
           <hr>
       </div>
   </section>
    

        header {
            background: url('../img/bg-header.png') no-repeat center center / cover;
            height: 100vh;
        }

        #main-nav {
            display: flex;
            justify-content: space-between;
            padding: 2rem;
        }

        #main-nav ul {
            display: grid;
            grid-template-columns: repeat(3, auto) 1fr repeat(3, auto);
            width: 100%;
            list-style: none;
            align-items: center;
            text-align: center;
        }

        #main-nav ul li a {
            padding: 0.75rem;
            font-size: 16px;
            margin: 0 0.25rem;
            color: #26272d;
        }

        #main-nav ul li a:hover {
            color: #bebebf;
        }

        .phone-img {
            display: block;
            margin: 0 auto;
        }

    

Answer №1

An alternative approach could be placing the phone image within a div as a background image rather than directly embedding it into the HTML code of the page.

To achieve this, you can eliminate the image from the HTML and introduce a div class="phone-image" (as an example) instead. This will enable you to efficiently manage the height and width of the div by adding the following CSS properties:

div .phone-image {
      background: url(../path-to-your-images-folder/images/yourphoto.jpg);
      background-size: cover;
      height: 100px; /* for instance */
      width: 40%; /* approximately 40% of the container width */
 }

Furthermore, to accurately position the image on top of another element, you can utilize a higher z-index along with position: absolute;. You may need to experiment with the top, bottom, left, and right values to achieve the desired placement ()

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

Discover the color value within an array that begins with the "#" symbol

In my PHP code, I have written a function that extracts values from a CSS file and creates an array. Now, I need to loop through this array and create another array that only contains color values (strings starting with #). The challenge is that the length ...

How to align Font Awesome icons inside `<span>` vertically with each other

Trying to vertically align multiple font awesome icons: ############################# icon icon icon icon icon icon ############################# <div class="announcement-card-body modal-body card border-0"> <span class="info fa fa-info- ...

Ways to adjust the size of an HTML fieldset?

Is there a way to decrease the space between the paragraph and the border of this fieldset? I attempted to adjust the margins in the following manner: fieldset { margin: 1px; margin-top: 2px; border-top-right-radius: 1px; } <fieldset> < ...

Formatting your HTML tags in Visual Studio

For instance, I have this particular tag with concise content <div>It is brief</div> However, upon formatting, Visual Web Developer presents it as <div> It is brief</div> which is unattractive. What I desire is <div> ...

A mysterious JavaScript snippet that automatically scrolls down when the webpage is loaded

Recently, I encountered an issue with a mysterious JavaScript script that automatically scrolls down when entering the page (I suspect it's JavaScript). I've tried to investigate using Firebug, examining the code, deleting scripts, and even remov ...

applying conditional rendering in vue.js

I'm currently working on developing a chat application using the guidelines outlined in this tutorial: https://socket.io/get-started/private-messaging-part-1/ One of my goals is to customize the appearance of the messages, so that when a message is s ...

Issue with Angular9-MatDatePicker: Unable to establish a connection with 'ngModel' as it is not recognized as a valid attribute of 'input'

Despite my efforts to implement ngmodel binding with matdatepicker, I am still encountering issues, even after reviewing multiple other posts on the topic. Here is a snippet of my HTML: <mat-form-field> <mat-label>Start Date</mat-label ...

Prevent line breaks caused by the span tag in Bootstrap 5

I have been attempting to use white-space:nowrap; to prevent the span tag in this text from causing a line break, but so far I have not been successful. The class styles used here are all standard Bootstrap 5 CSS class styles. On wider screens, the time i ...

Assign the appropriate label to the HTML checkbox based on the value obtained from the function

I have managed to successfully initiate the HTML service and display the checkbox itself. However, I am facing a challenge in displaying text next to the checkbox as a label. My goal is to have this label text be the return value of a function in the .gs f ...

What is the best way to apply a 2px padding to text-decoration: underline?

As a dedicated frontend developer, I believe in creating underlines with a 2px padding instead of the default 1px. Is there an easy solution for achieving this? PS: Yes, I am aware of using a div with a black background color and 1px * Npx with position: ...

Background of jQuery-UI Slider

Can the background color of a jQuery-UI Slider widget be set using JavaScript? This is the default setting: What I am trying to accomplish is the following: The green range should be determined based on historical data. I want to visually show the user ...

Looking to include an if/then statement for an item that has been generated within a div?

While I may not be a seasoned programmer, I am facing an issue that requires some problem-solving. Allow me to explain the situation to the best of my ability. Within a "div" element, I have implemented a v-for loop that sets a value in a variable for dis ...

Keywords: <footer>, <aside> not encompassing all aspects of the HTML on the content page

Recently, I have been transitioning my codebase from .NET webform to .NET Core: In the _Layout.cshtml, elements like <hr> and <section> span the entire width (e.g. 100%) of the html page as expected. However, when I insert similar tags in the ...

The Visualforce page is not displaying page breaks correctly for cells with rowspan in the table

Having encountered a similar issue to this question: table rowspan page break On my Visualforce page, I have an HTML table with a custom rowspan in one column (varies based on the number of spanned rows) and I'm experiencing a styling problem (see is ...

Issue with arranging cards in a grid when utilizing v-for alongside bootstrap

Just starting out with vuejs and attempting to create a grid by looping through objects using bootstrap classes. However, I'm running into an issue where the cards are not forming a grid as expected when utilizing the col classes. Below is the code f ...

Achieving overflow behavior in a div with maximum height that contains another div with maximum height (Overflow issue persists)

Currently, I am utilizing Materializecss to showcase a modal window. Within this modal, there is a div Content that showcases items using ng-repeat. However, the issue arises when the content fills up and the css rule for my content-div fails to take effec ...

Stop html text from overflowing container

I'm facing an issue with a Bootstrap container where the text inside is overflowing and not aligning properly. How can I ensure that the text stays within the container and doesn't cross over, instead just aligning at the bottom of the upper text ...

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

I am having difficulties invoking jQuery functions within an "asp:UpdatePanel". Despite the code provided below, my attempts to add a class to the div element ".popup-body" are unsuccessful. Interestingly, the "alert();" function works without any issues. ...

Adjust the dimensions of the image carousel in Twitter Bootstrap

Here is the code that I am currently working with: <div class="col-sm-4"> <div class="card"> <div class="card-block"> <div class="col-sm-4"> <div id="carouselExampleIndi ...

Creating a gaming application with Phaser.js and Ionic with subpar rendering capabilities

Attention developers! I recently created a game app using Phaser.js. I integrated the code into an Ionic blank starter app, allowing the Ionic framework to render the view while Phaser takes care of displaying the game. Issue: The game is a simple flapp ...