CODEWITHSUNDEEP
htmlcss
Izaak Lindsay
Izaak Lindsay

Reputation: 5

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>

Upvotes: 0

Views: 37

Answers (1)

Roger
Roger

Reputation: 3256

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>

Upvotes: 1

Related Questions