How to hide the second half of the image? - html

Question

My image which is in the head touches on the next block (seaction features). (image-phone)
https://imgur.com/a/CeOakka
I tried change types of position,z-index. If i cut the image its not cool and easy to fix ;)
And how can i variable my image: div-class or just img tag? In my code i just variable img with class without div blocks. Is it clean?
<div class="container">
<nav id="main-nav">
<ul class="menu">
<li>Tour</li>
<li>Features</li>
<li>Pricing</li>
<li>
<h2 class="logo">NEWPROVIDENCE</h2>
</li>
<li>Help</li>
<li>Contact</li>
<i class="fab fa-apple fa-1x"></i>Get app
</ul>
</nav>
<div class="showcase">
<h1>What 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>
<i class="fas fa-play"></i>Watch Video
</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

You could try to put the phone image inside of a div as a background image instead of embedding it into the html on the page.
If you remove the image from the html and add a div class="phone-image"(for example) instead, you can control the height and width of the div and add this to the css:
div .phone-image {
background: url(../path-to-your-images-folder/images/yourphoto.jpg);
background-size: cover;
height: 100px; /* for example */
width: 40%; /* for example 40% of the container width */
}
You would also have to position it correctly on top of the other image by using a higher z-index and position: absolute; and then play around with top, bottom, left and right values (https://medium.freecodecamp.org/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd)