0
私はブートストラップのイメージグリッドを修正しようとしていますが、私の全体の構造は間違っていると思います。私の間違いはどこですか？ここでは、イメージギャラリーの外観の最終的なイメージがあります。ここブートストラップグリッドギャラリー構造の修正
は、今まで私のコードです
.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 -->私のコードは、ホバー効果がオーケーですが、私は私が私のrowsとcolsで作成していると思うHTML構造心配です間違った方法。