Izaak Lindsay Izaak Lindsay - 7 months ago 10
HTML Question

Stopping absolute elements overlapping for nav items

Okay, so im trying to create an image based navigation bar, that when each image is hovered it will change with transition.

I followed this tutorial: http://css3.bradshawenterprises.com/cfimg/
and the transition works however now all my images overlap eachother.

Completely stuck here.



nav {
width: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
top: -16px;
}
nav li {
display: inline-block;
}
ul {
display: flex;
list-style-type: none;
}
nav img {
position: absolute;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
nav img.top:hover {
opacity: 0;
}

<nav>
<ul>
<li>
<a href="forums">
<img class="bottom" src="inc/img/nav/communityhover.png" />
<img class="top" src="inc/img/nav/community.png" />
</a>
</li>
<li>
<a href="store">
<img class="bottom" src="inc/img/nav/store.png">
<img class="top" src="inc/img/nav/store.png">
</a>
</li>
<li>
<a href="hiscores">
<img class="bottom" src="inc/img/nav/hiscores.png">
<img class="top" src="inc/img/nav/hiscores.png">
</a>
</li>
<li>
<a href="updates">
<img class="bottom" src="inc/img/nav/updates.png">
<img class="top" src="inc/img/nav/updates.png">
</a>
</li>
<li>
<a href="support">
<img class="bottom" src="inc/img/nav/support.png">
<img class="top" src="inc/img/nav/support.png">
</a>
</li>
<li>
<a href="vote">
<img class="bottom" src="inc/img/nav/vote.png">
<img class="top" src="inc/img/nav/vote.png">
</a>
</li>
<li>
<a href="#">
<img class="bottom" src="inc/img/nav/home.png">
<img class="top" src="inc/img/nav/home.png">
</a>
</li>
</ul>
</nav>




Answer

The problem you are having is that the size of the li isn't the same size as the picture. So make sure that the width and height are the same as the images you are using.

nav li {
  width: 350px;
  height: 150px;
}
nav ul {
  display: flex;
  list-style-type: none;
}
nav img {
  position: absolute;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
nav img.top:hover {
  opacity: 0;
}
<nav>
  <ul>
    <li>
      <a href="#">
        <img class="bottom" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=a1&w=350&h=150" />
        <img class="top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=a2&w=350&h=150" />
      </a>
    </li>
    <li>
      <a href="#">
        <img class="bottom" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=b1&w=350&h=150">
        <img class="top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=b2&w=350&h=150">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="bottom" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=c1&w=350&h=150">
        <img class="top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=c2&w=350&h=150">
      </a>
    </li>

  </ul>
</nav>

Comments