We use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Today we’d like to share some menu hover effects with you. We hope this set inspires you and gives you some ideas for your next project. The effects are either powered by CSS only or with the help of Greensock.

COIDEA - Inspiration for Menu Hover Effects

Attention: We are using some modern CSS techniques and properties for the demos (grid, flexbox) so please view them in a modern browser.

Example Menu Hover Effect

Our menu items can have different types: bcg, image, video, gallery or svg. Here we show structure for "bcg" type:

<!-- COIDEA:demo:menu-container START -->
<div class="menu-container">
  <nav>
    
    <!-- item:bcg START -->
    <div class="nav-item">
      <a data-scene="bcg" class="link active" href="javascript:void(0)">
        Napoleon
      </a>
    </div>
    <!-- item:bcg END -->
    
  </nav>
</div>
<!-- COIDEA:demo:menu-container END -->

<!-- COIDEA:demo:hover-container START -->
<div class="hover-container">
  
  <!-- item:bcg START -->
  <div class="single-hover bcg" data-scene="bcg">
    <span style="background-image: url(assets/img/single-hover-bcg.jpeg);"></span>
  </div>
  <!-- item:bcg END -->

</div>
<!-- COIDEA:demo:hover-container END -->

We have the following common styles for all the menus and plus for our "bcg" type:

/* menu container */

body #coidea .page-container .menu-wrapper .menu-container {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

body #coidea .page-container .menu-wrapper .menu-container nav {
  position: relative;
  display: block;
}

body #coidea .page-container .menu-wrapper .menu-container nav .nav-item {
  min-height: 84px;
  padding: 6px 0;
  white-space: nowrap;
}

body #coidea .page-container .menu-wrapper .menu-container nav .nav-item a {
  font-family: "Bungee Shade", cursive;
  position: relative;
  color: #FFFFFF;
  font-size: 64px;
  line-height: 64px;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 1;
  padding: 0;
  margin: 0;
  z-index: 1;
}

body #coidea .page-container .menu-wrapper .menu-container nav .nav-item a:hover {
  z-index: 2;
}

/* hover container */

body #coidea .page-container .hover-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

body #coidea .page-container .hover-container .single-hover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0;
}

/* menu container - bcg */

body #coidea .page-container .hover-container .single-hover.bcg span {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center center;
}

References and Credits