front end - Creating a simple Dock Cell that Fades In when Cursor Hover Over It

I like to create dock cells, that enhance the look of my notebooks. Do you know of a simple way to get the functionality in iBooks shown below in the video. I want the dock cell in Mathematica to "fade" into view when my cursor hover over it and "fade" out when it's not hovering over it.

Edit 1: Thank you Karsten. This is exactly what I was looking for. Below is a gif implementing a version of your code.

Answer

Edit: Fading overlay window

In order to get a top dock element with real transparency, one can create a window that overlays the current notebook window and adjusts its position together with it.

With[{nb = EvaluationNotebook[]},
  DynamicModule[{wm, ws},
   CreateWindow[
    PaletteNotebook[
     {DynamicWrapper[TextCell["Click OK to close", Orange], 

       ws = {CurrentValue[nb, WindowSize][[1]] - 15, 100}; 
       wm = AbsoluteCurrentValue[nb, WindowMargins] + {{7, 0}, {70, 50}}, 
       Initialization :> (wm = 
          AbsoluteCurrentValue[nb, WindowMargins] + {{7, 0}, {70, 50}}; 
         ws = {CurrentValue[nb, WindowSize][[1]] - 15, 100})],
      DefaultButton[]}
     , WindowMargins -> Dynamic[Setting@wm], WindowSize -> Dynamic[Setting@ws]
     , TextAlignment -> Center]
    , Background -> Blue
    , WindowOpacity -> 

     Dynamic[1/
       100 (150 - 
         Replace[MousePosition["WindowAbsolute", {0, 1}], None -> {0, 150}][[2]])]
    , WindowFloating -> True, WindowElements -> {}, WindowFrame -> "Frameless"
    , WindowFrameElements -> {}]
   ]];

---

One can use PaneSelector to create a fading effect.

CurrentValue[EvaluationNotebook[], DockedCells] =
 Cell[BoxData@ToBoxes@PaneSelector[{
      False -> 
       Panel["", ImageSize -> {Full, Automatic}, Appearance -> "Frameless"],
      True -> Panel["Hi", ImageSize -> {Full, Automatic}, Alignment -> Center]
      },
     Dynamic@CurrentValue["MouseOver"]
     , ImageSize -> All
     , ImageMargins -> 0, FrameMargins -> None
     , TransitionEffect -> "Fade", TransitionDirection -> Bottom, TransitionDuration -> 0.75

     ]
  , CellFrameMargins -> {{0, 0}, {0, 0}}]

The size of the DockedCells can be reduces, when the mouse isn't hovering over it:

CurrentValue[EvaluationNotebook[], DockedCells] =
 Cell[BoxData@ToBoxes@PaneSelector[{
      False -> Panel["", ImageSize -> {Full, 0}, Appearance -> "Frameless"],
      True -> Panel["Hi", ImageSize -> {Full, 100}, Alignment -> Center]
      },

     Dynamic@CurrentValue["MouseOver"]
     , ImageSize -> Automatic
     , ImageMargins -> 0, FrameMargins -> None
     , TransitionEffect -> "Fade", TransitionDirection -> Bottom, TransitionDuration -> 0.75
     ]]