CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapresponsive-design
Hunter Boen
Hunter Boen

Reputation: 3

Bootstrap constrain width div contained inside div

SOLVED

I'm using Bootstrap to make a page navigation using images and a text and slightly opaque radial gradient hover. The issue I'm having is that the hover is slightly wider than the image it sits over so I get thin grey bars to the left and right of the image on hover. I've managed to get it looking alright when at full screen, but if I resize the page it gets off again.

Here's the html:

<div class="row">
  <div class="col-xs-4 subnav" id="subnav1">
    <a href="#bands">
      <img src="_images/_thumbnails/niki_01_t.jpg" />
      <div id="subnav-overlay1" class="subnav-overlay">
        <h3 class="subnav-text" id="subnav-text1">BANDS</h3>
      </div>
    </a>
  </div>
  <div class="col-xs-4 subnav" id="subnav2">
    <a href="#portraits">
      <img id="subnav-image2" src="_images/_thumbnails/terence_03_t.jpg" />
      <div id="subnav-overlay2" class="subnav-overlay">
        <h3 class="subnav-text" id="subnav-text2">PORTRAITS</h3>
      </div>
    </a>
  </div>
  <div class="col-xs-4 subnav" id="subnav3">
    <a href="#products">
      <img src="_images/_thumbnails/bp_2_t.jpg" />
      <div id="subnav-overlay3" class="subnav-overlay">
        <h3 class="subnav-text" id="subnav-text3">PRODUCTS</h3>
      </div
    </a>
  </div>
</div>

And the CSS:

.subnav {
    display: block;
    position: relative;
    overflow: hidden;
}
.subnav img {
    width:100%; 
    height:100%;
    overflow:hidden;
}
.subnav a {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}
.subnav h3 {
  display: none;
  font-size: 2em;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);
}
.subnav-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow: hidden;
    background:rgba(0, 0, 0, 0.5);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    display:none;
    padding-right: -15px;
    padding-left: -15px;
}

Here's a screenshot

Upvotes: 0

Views: 393

Answers (1)

Stu Furlong
Stu Furlong

Reputation: 3629

Add position:relative to your <a>

.subnav a {
    position:relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

The reason being - the absolute positioning of the overlay will not adhere to the padding of the relatively positioned Bootstrap column, which comes with the extra 15px padding. By adding the position relative to your <a> which is confined in the padding, you are keeping the absolute overlay within the size of the <a>

Codepen

Note that above I changed the column class to col-md-4, but that should not be relevant for you.

Upvotes: 1

Related Questions