Tutorial: How to create an image navigation bar with CSS

There are times when we want to build a navigation bar for ourselves in the simplest form. Especially when we want an image on top of an image or below an image but perform it with many many redundancy codes made in HTML, CSS or even involved JavaScript. What i am going to demonstrate here is a simple yet powerful method we can all use in CSS to create such navigation bar that attached an image on top of it.

The Problem

I wanted to create a navigation bar that will display an image when hover on it and display when it is not being hovered.

The Concept

The solution to this problem is fairly simple but usually over complicated. We want an image and a word to be placed together in the same row and column on the navigation bar. Some people will do this with the following methods:

  • Create a two row of div block align them perfectly top to be image, bottom to be word
  • Use jQuery or JavaScript to assist with the effect and display of the image
  • Use position absolute to align it on top of the image
  • The list goes on..