У меня есть изображения и текст, который отображается в центре изображения, когда кто-то висит над изображением.Вертикальный текст центра на изображении - динамически
HTML выглядит следующим образом:
<article>
<div class="entry-content">
<a href="http://www.linktopost.com">
<h3 class="entry-title">Ring #1</h3>
<img width="620" height="387" src="http://i.telegraph.co.uk/multimedia/archive/02725/scotch-whisky_2725818b.jpg" class="aligncenter" alt="Platzhalter_3">
</a>
</div>
</article>
CSS:
article {
float:left;
width:30%;
display:block;
}
.entry-content {
width: 620px;
margin: 0 auto;
position: relative;
height: 387px;
}
.entry-content:hover .entry-title {
color: #000;
display: table-cell;
background-color: #fff;
opacity: 0.75;
}
.entry-title {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
line-height: 387px;
text-align: center;
display: none;
}
article img {
position:absolute;
}
Вы можете увидеть здесь: http://codepen.io/anon/pen/rOXOez
Есть ли шанс не использовать фиксированные значения пикселей в CSS - чтобы эффект зависания действовал и работал на любую картинку? В этом примере мне пришлось использовать ширину и высоту изображения в CSS для достижения того, что я хотел.
Спасибо!
вы можете использовать flex ... это лучший современный способ сделать это;) google flex align middle – Akxe