Overflow hidden not working for hover - css

Question

I have an issue wherein I am using a div with 50% border radius and overflow hidden property. In this div, There is another div with hover event. The hover event is called even when the cursor is outside the circular div.
CODE:
.check {
border-radius: 50%;
height: 100%;
overflow: hidden;
}
.pad {
padding: 2%;
}
.bl {
background: black;
height: 100%;
width: 50%;
position: relative;
float: left;
text-align: center;
padding-top: 3.5%;
line-height: 8;
}
.gr {
background: gray;
height: 100%;
width: 50%;
position: relative;
float: left;
padding-top: 10%;
text-align: center;
font-weight: 600;
}
.out {
height: 100%;
width: 200%;
position: relative;
}
#media only screen and (min-width: 900px) {
.gr {
font-size: 6vh;
}
}
#media only screen and (max-width: 900px) {
.gr {
font-size: 4vh;
}
}
#media only screen and (max-width: 399px) {
.gr {
font-size: 3vh;
}
}
.out {
transition: all 1s ease-in-out;
}
.out:hover {
margin-left: -100%;
}
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 pad">
<div class="check">
<div class="out">
<div class="gr">Technology</div>
<div class="bl">
<button type="button" class="btn btn-lg btn-primary">Start Quiz</button>
<br>
<button type="button" class="btn btn-lg btn-primary">Read Post</button>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 pad">
<div class="check">
<div class="out">
<div class="gr">General Knowldege</div>
<div class="bl">
<button type="button" class="btn btn-lg btn-primary">Start Quiz</button>
<br>
<button type="button" class="btn btn-lg btn-primary">Read Post</button>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 pad">
<div class="check">
<div class="out">
<div class="gr">Sports</div>
<div class="bl">
<button type="button" class="btn btn-lg btn-primary">Start Quiz</button>
<br>
<button type="button" class="btn btn-lg btn-primary">Read Post</button>
</div>
</div>
</div>
</div>
</div>
I want to call hover event inside the circular div only

Answer 1

Remove all the position:relative you defined, they are creating the issue:
.check {
border-radius: 50%;
height: 100%;
overflow: hidden;
}
.pad {
padding: 2%;
}
.bl {
background: black;
height: 100%;
width: 50%;
float: left;
text-align: center;
padding-top: 3.5%;
line-height: 8;
}
.gr {
background: gray;
height: 100%;
width: 50%;
float: left;
padding-top: 10%;
text-align: center;
font-weight: 600;
}
.out {
height: 100%;
width: 200%;
overflow:hidden;
}
#media only screen and (min-width: 900px) {
.gr {
font-size: 6vh;
}
}
#media only screen and (max-width: 900px) {
.gr {
font-size: 4vh;
}
}
#media only screen and (max-width: 399px) {
.gr {
font-size: 3vh;
}
}
.out {
transition: all 1s ease-in-out;
}
.out:hover {
margin-left: -100%;
}
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 pad">
<div class="check">
<div class="out">
<div class="gr">Technology</div>
<div class="bl">
<button type="button" class="btn btn-lg btn-primary">Start Quiz</button>
<br>
<button type="button" class="btn btn-lg btn-primary">Read Post</button>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 pad">
<div class="check">
<div class="out">
<div class="gr">General Knowldege</div>
<div class="bl">
<button type="button" class="btn btn-lg btn-primary">Start Quiz</button>
<br>
<button type="button" class="btn btn-lg btn-primary">Read Post</button>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 pad">
<div class="check">
<div class="out">
<div class="gr">Sports</div>
<div class="bl">
<button type="button" class="btn btn-lg btn-primary">Start Quiz</button>
<br>
<button type="button" class="btn btn-lg btn-primary">Read Post</button>
</div>
</div>
</div>
</div>
</div>