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

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 -> {}]
   ]];

TopDock


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}}]

DC1

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
     ]]

DC2


Here's my take (works smooth for macOS sierra).

content = Row[Button /@ {"a", "b", "c"}, " "];

CurrentValue[EvaluationNotebook[], DockedCells] = 
 Cell[BoxData @ ToBoxes @ Mouseover[
     ExpressionCell[Pane[Invisible@Button@""], "Text"], 
     ExpressionCell[Pane[content, ImageSize -> Full, Alignment -> Center], "Text"], ImageSize -> Full, TransitionEffect -> "Fade"], 
  Background -> Transparent, CellFrame -> 0]

enter image description here

But the dock isn't transparent! Don't know if that's possible...


Smooth fade effect probably won't be simple but here is a start:

CurrentValue[ EvaluationNotebook[],  DockedCells] = {
   Cell[ BoxData @ ToBoxes @ Mouseover[
      1,
      Grid@RandomReal[1, {3, 3} ],
      ImageSize -> {Full, Full}, 
      Alignment -> Center], 
    "DockedCell"]
}