html - Bootstrap 网格图库结构校正

Question

我正在尝试修复我的 Bootstrap 图像网格，但我认为我的整个结构是错误的。任何线索我的错误在哪里？这是图库应该是什么样子的最终图片。

这是我到目前为止的代码

.image-gallery {
  margin-bottom: 81px;
}
.space {
  margin-bottom: 30px;
}
.image-overlay {
  display: inline-block;
  position: relative;
}
.image-overlay .front-overlay {
  background: rgba(139, 197, 65, 0.65);
  position: absolute;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  border-radius: 5px;
}
.image-overlay .front-overlay p,
.image-overlay .back-overlay h3 {
  font-family: "Questrial", sans-serif;
  font-size: 24px;
  color: #fff;
  text-align: center;
}
.image-overlay .back-overlay p {
  font-family: "Raleway-Regular", sans-serif;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: #fff;
}
.image-overlay .back-overlay {
  visibility: hidden;
  position: absolute;
  top: 25%;
  left: 10%;
  right: 10%;
  bottom: 0;
}
.image-overlay:hover .back-overlay {
  visibility: visible;
}
.image-overlay:hover .front-overlay {
  visibility: hidden;
}
.image-gallery .image-overlay .front-overlay {
  visibility: hidden;
}
/* index page front overlay is hidden */

.image-gallery .image-overlay .back-overlay p {
  font-family: "Questrial", sans-serif;
  font-size: 24px;
  letter-spacing: 0.4px;
  margin: 15px 0 30px 0;
}
.master-image-gallery .image-overlay .back-overlay {
  top: 0;
}
.master-image-gallery .image-overlay .front-overlay {} .btn-link {
  min-width: 165px;
  background: transparent;
  border: 2px solid #8bc541;
  color: #8bc541;
  text-decoration: none;
  font-family: "Raleway-Bold", sans-serif;
  font-size: 13px;
}
.btn-link:hover {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="image-gallery">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <div class="row">
          <div class="col-md-12 col-sm-4 space">
            <a href="#" target="_blank" class="image-overlay">
              <img src="https://s12.postimg.org/b4vl9oxfd/product_1.jpg" width="360" height="243" title="someText" alt="someText">
              <div class="front-overlay"></div>
              <!-- front-overlay -->
              <div class="back-overlay">
                <p>Evaporative Coolers</p>
                <button type="button" class="btn btn-link center-block">shop this collection</button>
              </div>
              <!-- back-overlay -->
            </a>
            <!-- image -->
          </div>
          <div class="col-md-12">
            <a href="#" target="_blank" class="image-overlay">
              <img src="https://s12.postimg.org/6o38b0j7d/product_7.jpg" width="750" height="243" title="someText" alt="someText">
              <div class="front-overlay"></div>
              <!-- front-overlay -->
              <div class="back-overlay">
                <p>Evaporative Coolers</p>
                <button type="button" class="btn btn-link center-block">shop this collection</button>
              </div>
              <!-- back-overlay -->
            </a>
            <!-- image -->
          </div>
        </div>
        <!-- row -->
      </div>
      <!-- col-md-4 col-sm-4 -->
      <div class="col-md-4 col-sm-4">
        <div class="row">
          <div class="col-md-12">
            <a href="#" target="_blank" class="image-overlay">
              <img src="https://s12.postimg.org/rh5mzfbqx/product_2.jpg" width="360" height="243" title="someText" alt="someText">
              <div class="front-overlay"></div>
              <!-- front-overlay -->
              <div class="back-overlay">
                <p>Evaporative Coolers</p>
                <button type="button" class="btn btn-link center-block">shop this collection</button>
              </div>
              <!-- back-overlay -->
            </a>
            <!-- image -->
          </div>

        </div>
      </div>
      <!-- col-md-4 col-sm-4 -->
      <div class="col-md-4 col-sm-4">
        <div class="row">
          <div class="col-md-12">
            <a href="#" target="_blank" class="image-overlay">
              <div class="extra-margin">
                <img src="https://s12.postimg.org/68ryhzxa1/product_5.jpg" width="360" height="518" title="someText" alt="someText">
              </div>
              <div class="front-overlay"></div>
              <!-- front-overlay -->
              <div class="back-overlay">
                <p>Evaporative Coolers</p>
                <button type="button" class="btn btn-link center-block">shop this collection</button>
              </div>
              <!-- back-overlay -->
            </a>
          </div>
        </div>
      </div>
      <!-- col-md-4 col-sm-4 -->
    </div>
    <!-- row -->
  </div>
  <!-- container -->
</div>
<!-- image-gallery -->

这是我的代码，悬停效果还不错，但我担心 html 结构，我认为我的行和列是以错误的方式创建的。

Answer 1

重新排列 div 图像，并为一张图像提供更多宽度..检查下面的片段结果在整页..

.image-gallery {
  margin-bottom: 81px;
}
.space {
  margin-bottom: 30px;
}
.image-overlay {
  display: inline-block;
  position: relative;
}
.image-overlay .front-overlay {
  background: rgba(139, 197, 65, 0.65);
  position: absolute;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  border-radius: 5px;
}
.image-overlay .front-overlay p,
.image-overlay .back-overlay h3 {
  font-family: "Questrial", sans-serif;
  font-size: 24px;
  color: #fff;
  text-align: center;
}
.image-overlay .back-overlay p {
  font-family: "Raleway-Regular", sans-serif;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  color: #fff;
}
.image-overlay .back-overlay {
  visibility: hidden;
  position: absolute;
  top: 25%;
  left: 10%;
  right: 10%;
  bottom: 0;
}
.image-overlay:hover .back-overlay {
  visibility: visible;
}
.image-overlay:hover .front-overlay {
  visibility: hidden;
}
.image-gallery .image-overlay .front-overlay {
  visibility: hidden;
}
/* index page front overlay is hidden */

.image-gallery .image-overlay .back-overlay p {
  font-family: "Questrial", sans-serif;
  font-size: 24px;
  letter-spacing: 0.4px;
  margin: 15px 0 30px 0;
}
.master-image-gallery .image-overlay .back-overlay {
  top: 0;
}
.master-image-gallery .image-overlay .front-overlay {} .btn-link {
  min-width: 165px;
  background: transparent;
  border: 2px solid #8bc541;
  color: #8bc541;
  text-decoration: none;
  font-family: "Raleway-Bold", sans-serif;
  font-size: 13px;
}
.btn-link:hover {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="image-gallery">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <div class="row">
          <div class="col-md-12 col-sm-4 space">
            <a href="#" target="_blank" class="image-overlay">
              <img src="https://s12.postimg.org/b4vl9oxfd/product_1.jpg" width="360" height="243" title="someText" alt="someText">
              <div class="front-overlay"></div>
              <!-- front-overlay -->
              <div class="back-overlay">
                <p>Evaporative Coolers</p>
                <button type="button" class="btn btn-link center-block">shop this collection</button>
              </div>
              <!-- back-overlay -->
            </a>
            <!-- image -->
          </div>
          <div class="col-md-12 col-sm-4 space">
            <a href="#" target="_blank" class="image-overlay">
              <img src="https://s12.postimg.org/6o38b0j7d/product_7.jpg" width="360" height="243" title="someText" alt="someText">
              <div class="front-overlay"></div>
              <!-- front-overlay -->
              <div class="back-overlay">
                <p>Evaporative Coolers</p>
                <button type="button" class="btn btn-link center-block">shop this collection</button>
              </div>
              <!-- back-overlay -->
            </a>
            <!-- image -->
          </div>
        </div>
        <!-- row -->
      </div>
      <!-- col-md-4 col-sm-4 -->
      <div class="col-md-4 col-sm-4">
        <div class="row">
		 <div class="col-md-12 col-sm-4 space">
            <a href="#" target="_blank" class="image-overlay">
              <div class="extra-margin">
                <img src="https://s12.postimg.org/68ryhzxa1/product_5.jpg" width="360" height="518" title="someText" alt="someText">
              </div>
              <div class="front-overlay"></div>
              <!-- front-overlay -->
              <div class="back-overlay">
                <p>Evaporative Coolers</p>
                <button type="button" class="btn btn-link center-block">shop this collection</button>
              </div>
              <!-- back-overlay -->
            </a>
          </div>
         

        </div>
      </div>
      <!-- col-md-4 col-sm-4 -->
      <div class="col-md-4 col-sm-4">
        <div class="row">
         <div class="col-md-12">
            <a href="#" target="_blank" class="image-overlay">
              <img src="https://s12.postimg.org/rh5mzfbqx/product_2.jpg" width="360" height="243" title="someText" alt="someText">
              <div class="front-overlay"></div>
              <!-- front-overlay -->
              <div class="back-overlay">
                <p>Evaporative Coolers</p>
                <button type="button" class="btn btn-link center-block">shop this collection</button>
              </div>
              <!-- back-overlay -->
            </a>
            <!-- image -->
          </div>
        </div>
      </div>
      <!-- col-md-4 col-sm-4 -->
    </div>
    <!-- row -->
  </div>
  <!-- container -->
</div>
<!-- image-gallery -->