Question

This is the CSS for the header DIV:

#header { 
  display: block;
  float: left;
  min-width: 100%;
  min-height: 170px;
  height: auto; 
  background-color: #030309; 
  background-color: #191718; 
  position:fixed; 
  margin-top: -210px; 
  z-index: 999999; 
  opacity:.76;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  top: 0;
}

and this is for the hover state:

#header:hover { 
  display:block; 
  opacity:1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;   
  transition: opacity 1s ease-in-out;
}

What I want to make it so the header is hidden by default and appears when it’s hovered. I’ve tried to add display: none on #header and display:block; on #header:hover but it’s not working.
I’ve tried also with opacity:0; on #header and opacity:1; on #header:hover but it’s not ok because the content beneath the header remains fixed and it’s not visible from top of the page.

Some suggestions?

Answer 1

First you have a margin-top:-210px that is causing the header to be not visible but you’re never moving it down to 0 on hover. Take that out. Then you can just set the opacity to 0 normally and 1 on hover and it’ll fade it in on hover.

DEMO

Alternatively, if you want it to slide down, change the transition from just opacity to all and set a top:0 in the :hover state. You also need to set a height that is greater than the negative top margin so part of the element will be visible so the user can hover over it. I set it to 220px.

Relevant changes in CSS:

#header {
    top:-210px;
    height: 220px;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}

#header:hover {
    opacity:1;
    top:0px;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}​

DEMO