css - Transition with hidden elements -

I have a text that displays elsewhere (otherwise hidden) text on the hover, such as:

HTML

  & lt; Div class = "design" & gt; Me & lt; Span & gt; It & lt; / Span & gt; & Lt; / Div & gt;   
  CSS   
  Design {status: absolute; Z-index: 2; Color: # 404040; }. Design: Hover (cursor: pointer; }. Design period {status: complete; display none; }. Design: Hover span {display: block; Top: 47px; Left: 45px; Font-family: aerial; Font size: 13px; Color: # 000; }   
 How can implement transit effects hidden or hidden on the basis of Hoover? Obviously there is no conflict with  transition   display: none  and : block , but using  visibility  Either does not work.  
 Edit: jsFiddle -   
 
 
 first method  
 According to I (I think) MDN (Mozilla Developer Network) you can not transition the display, which you were trying to use to get the  opacity  I also rearrange your CSS again:  
 - Work code.  
 CSS:  
 . Design period {status: absolute; Opacity: 0; Transition: Opacity 1s; Display area; Top: 47px; Left: 45px; Font-family: aerial; Font size: 13px; Color: # 000; Width: 0; Height: 0; Margin-left: -1000px;   
}  
 . Design: Hover span {Opacity: 1; / * Transition: all 1s; * / Width: 30px; Height: auto; Margin-left: 0; }   
 Note that codepen.io uses prefix-free, see for browser support, prefixes can be added.  
  Edit -  To avoid OP issue below, add:  width: 0; Height: 0;  for UN, and one pixel width / height such as  width: 30px; Height: auto;  On hover (see example) If you see  the right  the hover effect to that area, but in practice it would be very rare in my opinion, it also solved using the   
 
 
 
 
 
 
  
 
 
 
 
 
 Code> span . This is any negative  margin  or custom  width  or  heights .  
 See     P> However, this is not supported in IE, perhaps for more help see.  
 Otherwise, I do not think the objective of OP can be  completely .