CSS hover bubble does not seem out - html

Question

Hello friends I have a problem with mouse hover on a div.
I have created this DEMO from codepen.io
So you can see in this demo when you hover over image the bubble will be shown. But the bubble does not seem out.
Here is the HTML code:
<div class="container"
<div class="present_wrp">
<div class="wo_wrp2 wo-wrp2">
<div class="wo_content2">
<div class="ornekoto"><img src="http://cdn.flaticon.com/png/256/26625.png" width="267" height="250" /><div class="ornot"></div></div>
</div>
</div>
</div>
</div>
and the CSS code:
.container {
margin:0px auto;
width:500px;
height:500px;
margin-top:100px;
}
.wo_wrp *:last-child {
margin-bottom: 0;
}
.wo-wrp2 {
float: left;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
position: relative;
width: 300px;
}
.wo_content2 {
background: none repeat scroll 0 0 #FFFFFF;
background-color: #fff;
padding: 15px;
position: relative;
z-index: 1;
overflow:hidden;
border: 1px solid #97a8bb;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius:3px;
}
.wo_content_t2 {
background: none repeat scroll 0 0 #FFFFFF;
background-color: #fff;
padding:5px;
position: relative;
z-index: 1;
overflow:hidden;
border: 1px solid #97a8bb;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius:3px;
}
.wo-wrp2:after {
border-radius: 0 0 50% 50% / 0 0 20px 20px;
bottom: 0;
box-shadow: 0 10px 10px rgba(113, 145, 182, 0.5);
content: "";
height: 20px;
left: 10px;
position: absolute;
right: 10px;
}
.ornekoto{
float:left;
width:267px;
height:250px;
background-color:#307cdc;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-o-border-radius:3px
}
.ornot
{
position: absolute;
width: 400px;
height: 500px;
padding: 0px;
background: #307cdc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display:none;
margin-top:-755px;
}
.ornot:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #307cdc transparent;
display: block;
width: 0;
z-index: 1;
bottom: -15px;
left: 58px;
}
.ornekoto:hover .ornot{
display:block;
}

Answer 1

The problem is that you have overflow:hidden; set. If you swap that for a clearfix it will work fine.
Overflow hidden is keeping the height of the container, so you need to first add a clearfix to the div (a clearfix allows the div to keep the height of the floated elements within it).
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
Next all you need to do is to add this to the surrounding div:
<div class="wo_content2 cf">
And then remove the overflow hidden property
.wo_content2{
overflow:hidden;
}
Demo here:
http://codepen.io/EightArmsHQ/pen/NPbKpz

Answer 2

You're setting overflow: hidden on .wo_content2 which prevents your bubble from popping out of it's parent container (because the "overflow" is hidden). Use a clearfix instead:
.wo_content2 {
background: none repeat scroll 0 0 #FFFFFF;
background-color: #fff;
padding: 15px;
position: relative;
z-index: 1;
/*overflow:hidden;*/ <---------- remove
border: 1px solid #97a8bb;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius:3px;
}
.wo_content2:after {
content: '';
display: block;
clear: both;
}
CODEPEN