IS there anyway to make the element overflow when you mouse over it

Question

suppose I mouse over blue, it should overflow and if on red, red div element should overflow. Am I making my question clear

Answer 1

yes you can change the element z-index on hover:

div {
background-color: red;
z-index: -1;
}

div:hover {
z-index: 1;
}

Answer 2

thanks kamil.
I did it like this:
.blue{
z-index :3;
position:relative;
background-color: #8EC4D0;
height:120px;
width:120px;
color:#FFF;
margin-bottom:15px;
}
.red{
z-index:2;
position:relative;
background-color:#FF4D4D;
color:#FFF;
margin-top:-50px;
margin-left:50px;
height:120px;
width:120px;
}
.red:hover{
z-index:3;
};