当图像悬停时,我有图像和显示在图像中心的文字。图像上的垂直居中文本 - 动态
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 ...这是最好的现代方式来做到这一点;)谷歌flex对齐中间 – Akxe