CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Joe Riggs
Joe Riggs

Reputation: 1324

Fit Child Div Inside Parent Div on Hover

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"> <a href="#" class="viewButton">VIEW</a>

                </div>
            </div>
            <div class="col-sm-4 col-xs-6 resultsinner">
                <div class="result resultSolidHover">DIV2 TEXT</div>
                <div class="resultHoverButton"> <a href="#" class="viewButton">VIEW</a>

                </div>
            </div>
            <div class="col-sm-4 col-xs-6 resultsinner">
                <div class="result resultSolidHover">DIV3 TEXT</div>
                <div class="resultHoverButton"> <a href="#" class="viewButton">VIEW</a>
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;
}

Upvotes: 0

Views: 408

Answers (3)

Jhey
Jhey

Reputation: 1377

There are two approaches to get the behaviour you desire.

  1. You can show/hide the relevant element on hover; http://jsfiddle.net/tu40thL8/15/. [PREFERRED OPTION]
  2. 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;
}

Upvotes: 1

krunos
krunos

Reputation: 163

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;
}

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28397

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/

Upvotes: 1

Related Questions