4
Guys私は問題に直面しています。オーバーレイ効果を持つ画像グリッドを作成しています。これは、絶対位置のコンテナではなく、誰かがそれにカーソルを合わせるとキャプションとテキストがあります。
グリッドは1行につき3つの画像しか持てません。それはすべて正常に動作しますが、オーバーレイ効果の親要素に応じて、キャプションと段落のテキストを垂直方向に配置したいと考えています。私はflexboxを使用してこれを行うことができますが、私はflexboxを使用していないため、ブラウザの互換性を求めています。 flexboxを使用せずにこれを行う方法はありますか？フレックスボックスを使用しない垂直センタリング
*,
.row,
.col {
box-sizing: border-box;
}
body {
font: 1em/1.5 'Open Sans', sans-serif;
color: #373737;
background: #eaeaea;
}
h1,
h2,
h3 {
text-transform: uppercase;
}
h2 {
font-size: 1.125em;
color: #4a89ca;
font-weight: 600;
margin: 0;
}
h3 {
font-size: 1.3em;
line-height: 1.25em;
margin-top: .85em;
margin-bottom: .5em;
}
p {
font-size: .875em;
line-height: 1.4;
margin: 0 0 1.5em;
}
.container {
max-width: 1260px;
width: 94.02985075%;
background: #fff;
margin: auto;
}
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.row {
text-align: center;
margin-bottom: 10px;
}
.row:last-child {
margin-bottom: 0;
}
.col {
position: relative;
float: left;
display: block;
}
.col + .col {
margin-left: 1.6%;
}
.col-4 {
width: 32.2666666667%;
line-height: 0;
overflow: hidden;
}
.col-4 img {
max-width: 100%;
display: block;
background-color: #eaeaea;
}
.photo-overlay {
position: absolute;
left: 0;
padding-left: 20px;
padding-right: 20px;
top: 0;
bottom: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, .5);
}
/* =================================
Photo Overlay Transitions
==================================== */
.photo-overlay {
opacity: 0;
transition: opacity .5s;
}
.photo-overlay:hover {
opacity: 1;
}<body>
<div class="container"> <!-- Start The Container-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/UbkKBuO.jpg" alt="img_1.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/oXvUpY5.jpg" alt="img_2.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/rmM0h1h.jpg" alt="img_3.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div><!-- End The Row-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/51LBdNS.jpg" alt="img_4.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/x9EzUS5.jpg" alt="img_5.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/Y0cIa13.jpg" alt="img_6.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div><!-- End The Row-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/x3qHk2k.jpg" alt="img_7.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/1cHC3hQ.jpg" alt="img_8.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
<div class="col col-4">
<img src="http://i.imgur.com/lNNT4Mq.jpg" alt="img_9.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div><!-- End The Row-->
<div class="row"><!-- Start The Row-->
<div class="col col-4">
<img src="http://i.imgur.com/145mdOE.jpg" alt="img_10.jpg">
<div class="photo-overlay">
<h3>Some Caption</h3>
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo</p>
</div>
</div>
</div> <!-- End The Row-->
</div> <!-- End The Container-->
</body>