Hovered element to overflow out from an overflow:hidden element css

Question

I have made a fiddle for reference: http://jsfiddle.net/kLFn9/

The overflow:hidden in question is highlighted.

Basically, i\'m using :hover:af

Answer 1

I am using simple z-index for force the element hovered to escape the parent element. Please check

div {
 width:500px;
height:200px;
 background:red;   
    margin: 50px;
    overflow: hidden; /* this rule */
}

span {
 background: blue;
color: white;
    position: relative;
 top:100px;  
display:block;   
width: 100px;  
margin: auto;    
}

span:hover:after {
 content: attr(data-name); 
color: black;
 position: fixed; /* Here I replaced position abosolute to fixed */
top: 10px;  /* Here I replaced top -150px  to 10px */
 left: 250px;  /* Here I replaced positionleft 0 to 250px */
 z-index:99999;} /* Here I added new z-index property to 99999 */

hover