css - Hide content but respond to :hover -

i working on pure oocss approach creating charms found in windows 8. have dock class finished, having problems figuring out how "expand" charm when mouse moved on docked area. know there ways hide content have browser respond :hover event of charm. if have ideas, let me know.

dock

docks content edge of screen.

.dock  {     position:                       fixed;      height:                         auto;      width:                          auto; }  .dock--top {     width:                          100%;      top:                            0; }  .dock--bottom {     width:                          100%;      bottom:                         0; }  .dock--left {     height:                         100%;      width:                          auto;      left:                           0; }  .dock--right {     height:                         100%;      right:                          0; } 

charm

island containing content.

.charm {     padding:                        24px; }  .charm:hover {  } 

html

<div class="charm dock dock--right">   </div> 

i tried padding , setting width 1px had no luck. on original plan have applied background-color when move moved on did not render line going down side of screen.

this close have gotten ugly:

.charm__body {     width:                           0;      visibility:                      collapse; }  .charm:hover {     background:                     blue; }  .charm:hover .charm__body {     width:                          auto;      visibility:                     visible; } 

you can make transparent div, positioned absolutely, , make work hover trigger.