Fit Child Div Inside Parent Div on Hover - html

Question

I have a child div that needs to be displayed on top of its parent when hovered. The child div doesnt seem to respect the parent's div padding restraints and is therefore bigger.
I have found that I can use the margin instead of padding on the parent, however this breaks the bootstrap column layout and forces the 3rd div into the next row which is not desirable.
To summarize: how do a make the hovered div the same width as its parent w/o using margin instead of padding?
http://jsfiddle.net/tu40thL8/3/
<div class="col-sm-12 col-xs-12" id="search-result">
<div class="row" id="searchResults">
<div id="result-list" class="results">
<div class="col-sm-4 col-xs-6 resultsinner">
<div class="result resultSolidHover">DIV1 TEXT</div>
<div class="resultHoverButton"> VIEW
</div>
</div>
<div class="col-sm-4 col-xs-6 resultsinner">
<div class="result resultSolidHover">DIV2 TEXT</div>
<div class="resultHoverButton"> VIEW
</div>
</div>
<div class="col-sm-4 col-xs-6 resultsinner">
<div class="result resultSolidHover">DIV3 TEXT</div>
<div class="resultHoverButton"> VIEW
LALALAL</div>
</div>
</div>
</div>
</div>
.resultHoverButton {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #364048;
background-size: cover;
}
.resultsinner:hover .resultHoverButton {
display:block !important;
visibility:visible !important;
}
.resultSolidHover {
background-color: yellow;
padding:0 20px;
border-style: solid;
border-width: 1px;
}

Answer 1

There are two approaches to get the behaviour you desire.
You can show/hide the relevant element on hover; http://jsfiddle.net/tu40thL8/15/. [PREFERRED OPTION]
Define the correct absolute positioning on hover in correlation with Bootstrap padding(15px); http://jsfiddle.net/tu40thL8/17/.
Option 1 is simplest and decouples you from Bootstraps implementation. With this option when you hover you hide .resultSolidHover
.resultsinner:hover .resultSolidHover {
display:none;
}
This allows you to take out all of the absolute positioning defined for resultHoverButton as follows;
.resultHoverButton {
display: none;
background-color: #364048;
}
Option 2 relies on getting your absolute positioning correct. Bootstrap defines padding for columns of 15px. This means when you absolute position your hover button it needs to have a left and right of 15px. Simply changing the class definition for resultHoverButton to;
.resultHoverButton {
display: none;
position: absolute;
top: 0%;
left: 15px;
right: 15px;
height: 100%;
background-color: #364048;
background-size: cover;
}

Answer 2

That is because you are doing what you want by positioning it absolutely. Absolute position will move it out of the flow and be guided by the left, top etc. positions. And, why are you using visibility here, really not required at all.
Keep it simple and do it this way, by just changing the display on hover for both children:
.resultHoverButton {
display: none;
background-color: #364048;
border: 1px solid #ccc;
}
.resultSolidHover {
background-color: yellow;
padding:0 20px;
border: 1px solid #ccc;
}
.resultsinner:hover .resultSolidHover {
display:none;
}
.resultsinner:hover .resultHoverButton {
display:block;
}
Updated Fiddle: http://jsfiddle.net/tu40thL8/10/

Answer 3

Example Codepen
Hello check this one out, i'm not sure if this is what you are looking for.
<div class="resultOut">
<div class="resultInner"><h1>Hello World!</h1></div>
</div>
*{
margin:0;
padding:0;
}
.resultOut{
position:relative;
width:500px;
height:200px;
background:yellow;
}
.resultInner{
visibility:hidden;
position:absolute;
width:100%;
height:100%;
background:red;
}
.resultOut:hover .resultInner{
visibility:visible;
}
.resultInner h1{
text-align:center;
line-height:200px;
}