4
Jungs Ich stehe vor einem Problem, was ich mache, ist ein Bildraster mit dem Overlay-Effekt, der nichts als ein Container mit absoluter Position ist und eine Beschriftung und Text hat, wenn jemand darauf schwebt.
Das Raster kann nur 3 Bilder pro Zeile haben. Alles funktioniert gut, aber ich möchte den Titel und den Absatztext nach dem übergeordneten Element des Überlagerungseffekts vertikal zentrieren. Ich weiß, dass ich das tun kann, indem ich flexbox verwende, aber ich will Browserkompatibilität, deshalb verwende ich flexbox nicht. Gibt es eine Möglichkeit, dies ohne Verwendung von flexbox zu tun?Vertikale Zentrierung ohne 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>