我正在使用 Instafeed.js 插件并尝试设置“喜欢”悬停覆盖以填充整个图像框,但是,我正在努力将高度设置为 100%。
我试图避免将容器的高度设置为像素值,因为整个插件当前都是响应式的。
我环顾四周并尝试了不同的值组合display
,position
但主要是反复试验。
CSS:
#instafeed {
width: 100%;
margin-bottom: 80px;
}
#instafeed a {
position: relative;
}
#instafeed .ig-photo {
width: 25%;
vertical-align: middle;
}
#instafeed .likes {
width: 100%;
height: auto;
top: 0;
left: 0;
right: 0;
position: absolute;
background: #f18a21;
opacity: 0;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 28px;
color: #ffffff;
line-height: 100%;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 100ms ease;
-moz-transition: opacity 100ms ease;
-o-transition: opacity 100ms ease;
-ms-transition: opacity 100ms ease;
transition: opacity 100ms ease;
}
#instafeed a:hover .likes {
opacity: 0.8;
}
演示:http: //jsfiddle.net/rc1wj5t9/
任何帮助/建议将不胜感激!