Charlie Marrero Charlie Marrero - 2 months ago 6
Javascript Question

jQuery contenthover divs start a new line instead of remaining horizontal

I am trying to achieve a layout like so, with the contenthover script in action:

Mockup Draft Of Desired Look

But instead, I get what appears here. The images do not line up correctly.

I've tried using span instead to no avail, and given the divs display:inline and display:inline-block with no difference.

The css code I have for the images and the contenthover divs are as follows:

.contenthover {
margin: auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
clear: both;
}
#container #bg1 .verbiage-nb img {
margin: 0px;
float: left;
clear: none;
}


The HTML for them:

<img id="prod_rl" src="images/nb15-product_ralphlauren.jpg" width="263" height="242"/>
<div class="contenthover">
<h3>Ralph Lauren</h3>
</div>


Lastly, the js script at the bottom of the page:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/contenthover-full.js"></script>
<script>
$('#prod_rl').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
</script>


Not sure what I'm missing at this point.

Answer

Your table structure is inadequate. TR and TD are not at the right place, try something like this :

td {
  border: #f00 dashed 1px;
  vertical-align: top;
}
div.ch-hover {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
div.ch-hover div.contenthover {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
}
div.ch-hover div.contenthover:hover {
  opacity: 1;
}
div.ch-hover div.contenthover p {
  color: #fff;
  padding: 10px;
}
<table>
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <td>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_ralphlauren.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_dwp.jpg"/>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_gap.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_ever.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_koral.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_koraltides.jpg"/>
                </div>
                <div class="ch-hover">
                  <div class="contenthover">
                    <p>Some text</p>
                  </div><img src="http://nicolekingburroughs.com/images/nb15-product_7famk.jpg"/>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <div class="ch-hover">
          <div class="contenthover">
            <p>Some text</p>
          </div><img src="http://nicolekingburroughs.com/images/nb15-product_agjeans.jpg"/>
        </div>
      </td>
    </tr>
  </tbody>
</table>