Fixed Menu Dissapears on Image Hover Effect

Question

I'm fairly new to coding in HTML and CSS.

I have the following HTML and CSS Code, a fixed menu nav bar and an image below that makes an effect on hovering.

How do I go about the image not blocking the menu when zooming in?

Also how do I go about not stretching the image but resizing the div where it is posted in order to fir the browser screen a bit?

* {background-color: black
}
*{
    padding: 0;
    margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background-color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  height: 65px;
  border-style: dashed;
  border-color:green;
  border-radius: 20px;
  height: 80px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  border-style: dotted;
  margin-left: 24px;
  margin-top: 11px;
}

li a:hover {
  background-color: red;
}

.parrafo{
    font-size: 40px;
    padding: 75px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-left: 22px;
    padding-left: 150px;
    border-top: dotted 5px red;
    border-bottom: dotted 5px yellowgreen;
    display: flex;
    flex-direction: row;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
    
}

.queonda{
font-family: sans-serif;
font-weight: bold;
color: white;
font-size: 50px;
margin-left: 85px;
}

.test{
    margin-left: 200px;
    margin-top: 270px;
}

.test2{
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 700px;
}

.portrait {
  overflow: hidden;
  display: inline-block;
}

.portrait img {
  transition: transform 0.5s linear;
  max-width: 100%;
  max-height: 100%;
}

.portrait:hover img {
  transform: scale(1.1);
}

.cat {
 height: 1250px;
 width: 1900px;
}

.algo {
    height: 880px;
    width: 1700px;
    display: block;
}

.active {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

<div class="active">
    <ul>
        <li><a href="#home">Tour</a></li>
        <li><a href="#news">Listen to Music</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>

<div class="portrait algo"><img src="https://i.ibb.co/dLrSmP7/1111.jpg" alt=""></div>

<div class="parrafo">
    <img src="https://muzikercdn.com/uploads/products/4207/420772/09821a89.jpg" alt="Ciudad con Transito">
    <P class="test">MUSIC<br>MAINSTREAM   SELLOUT</P>
</div>

<div class="test2">
    <P class="queonda">VIDEOS</P><br><br>
    <video width="1280" controls autoplay="off">
        <source src="./img/prueba2.mp4" type="video/mp4">

</div>

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="footer-col">
                <h4>Terms & Conditions</h4>
            </div>
            <div class="footer-col">
                <h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
            </div>

            <div class="footer-col">
                <h4>Follow Us</h4>
                <div class="social-links">

                </div>
            </div>
            <div class="footer-col">
                <div class="social-links">
                    <h3><a href="#" class="fa fa-facebook"></a>
                        <a href="#" class="fa fa-twitter"></a>
                        <a href="#" class="fa fa-instagram"></a>
                        <a href="#" class="fa fa-youtube"></a>
                    </h3>
                </div>
            </div>
        </div>
</footer>

Hopefully you guys can give me some guidancee on this to fix it :)

score 0 · Accepted Answer · answered May 18 '22 at 13:30

Just add any positive z-index to navigation.

* {background-color: black
}
*{
    padding: 0;
    margin: 0;
}

.navigation {
  z-index: 1;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background-color: black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  height: 65px;
  border-style: dashed;
  border-color:green;
  border-radius: 20px;
  height: 80px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  border-style: dotted;
  margin-left: 24px;
  margin-top: 11px;
}

li a:hover {
  background-color: red;
}

.parrafo{
    font-size: 40px;
    padding: 75px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-left: 22px;
    padding-left: 150px;
    border-top: dotted 5px red;
    border-bottom: dotted 5px yellowgreen;
    display: flex;
    flex-direction: row;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
    
}

.queonda{
font-family: sans-serif;
font-weight: bold;
color: white;
font-size: 50px;
margin-left: 85px;
}

.test{
    margin-left: 200px;
    margin-top: 270px;
}

.test2{
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 700px;
}

.portrait {
  overflow: hidden;
  display: inline-block;
}

.portrait img {
  transition: transform 0.5s linear;
  max-width: 100%;
  max-height: 100%;
}

.portrait:hover img {
  transform: scale(1.1);
}

.cat {
 height: 1250px;
 width: 1900px;
}

.algo {
    height: 880px;
    width: 1700px;
    display: block;
}

.active {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

<div class="navigation active">
    <ul>
        <li><a href="#home">Tour</a></li>
        <li><a href="#news">Listen to Music</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</div>

<div class="portrait algo"><img src="https://i.ibb.co/dLrSmP7/1111.jpg" alt=""></div>

<div class="parrafo">
    <img src="https://muzikercdn.com/uploads/products/4207/420772/09821a89.jpg" alt="Ciudad con Transito">
    <P class="test">MUSIC<br>MAINSTREAM   SELLOUT</P>
</div>

<div class="test2">
    <P class="queonda">VIDEOS</P><br><br>
    <video width="1280" controls autoplay="off">
        <source src="./img/prueba2.mp4" type="video/mp4">

</div>

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="footer-col">
                <h4>Terms & Conditions</h4>
            </div>
            <div class="footer-col">
                <h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
            </div>

            <div class="footer-col">
                <h4>Follow Us</h4>
                <div class="social-links">

                </div>
            </div>
            <div class="footer-col">
                <div class="social-links">
                    <h3><a href="#" class="fa fa-facebook"></a>
                        <a href="#" class="fa fa-twitter"></a>
                        <a href="#" class="fa fa-instagram"></a>
                        <a href="#" class="fa fa-youtube"></a>
                    </h3>
                </div>
            </div>
        </div>
</footer>

Thank you for that! It worked! Do you have any idea how to reduce div size on the main image to actually fit the screen? or does it have to be on specific dimensions? — Erudes, May 18 '22 at 13:46
@Erudes You are probably looking for [_viewport units_](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) `vw` and `vh` where `width: 100vw; height: 100vh;` is 100% of viewport (screen). Or you can use `background-image` with size `cover` but you should first check [existing questions on SO](https://stackoverflow.com/questions/67028684/how-to-make-div-occupy-100-of-viewport-height-in-browser) or search it on internet and come back with new question if something doesn't work. — Jax-p, May 18 '22 at 13:56
Thanks, so I was able to reduce div width and height, however what I am trying to do is for the div to fit the image, as the image does not have all of the resolution to fit it, is that even possible? or a stretch value for it maybe? — Erudes, May 18 '22 at 14:24
@Erudes look into the `object-fit` attribute: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit — AStombaugh, May 18 '22 at 15:39
@AStombaugh thanks, for the reply, I applied that attribute with all of the options but it does not work — Erudes, May 18 '22 at 16:06
@Erudes Which image are you trying to fit? The album cover? Or are you referring to the whitespace between the portrait and the album cover section? — AStombaugh, May 18 '22 at 16:16
@AStombaugh The first image you see with the three members of the band — Erudes, May 18 '22 at 17:38
@Erudes https://jsfiddle.net/astombaugh/54xbLphs/22/ is this what you're going for? `object-fit: cover` will use the entirety of the space available but it will crop the image so it stays proportional (which you probably want because you have people in a photo and you don't want to add 10 pounds to their faces by stretching the image ;) ) but it also needs some set width and height attributes and not just maximum values. — AStombaugh, May 18 '22 at 17:49

Fixed Menu Dissapears on Image Hover Effect

1 Answers1