使布局为“内联块”的图像在底部具有悬停标题

Posted 2023-03-05

【中文标题】使布局为“内联块”的图像在底部具有悬停标题

【英文标题】：Make images layed out as 'inline-block' have on-hover titles on the bottom

【发布时间】：2014-03-15 14:00:21

【问题描述】：

我正在开发一个图片库，并希望通过以下方式在图片底部显示标题：

图片默认不显示任何文字

当鼠标悬停在图像上时，一个（可能被截断的）标题出现在深灰色半透明背景的底部

最好我的 html 保持原样；最重要的是，图像保持为“显示：内联块”，因为这是布局所需要的。

（可选）将鼠标悬停在标题上时（如果它被截断），它会完全展开

（可选）标题可以包含链接/整个图像是一个链接

请看图解说明：

这有点类似于http://www.flickr.com/explore 和许多其他网站的做法。

这是我目前所拥有的（实际上并没有太多，因为它将标题呈现在垂直中间，而不是在底部）：

.image-block 
    display: inline-block;
    margin: 0 0 0 0;


.container  /* testing only */
    width: 1555px;
    overflow: scroll;




.hover-me 
   position: relative;



.hover-me img
    width:100%;
    height:auto;
    display: block;


.hover-me:after 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(128,128,128,.5);
    transition: all .5s ease;
    opacity: 0;


.hover-me .caption 
    display: block;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -10px;
    text-align: center;
    transition: all .5s ease;
    opacity: 0;
    z-index: 2;
    color: #fff;


.hover-me:hover:after , .hover-me:hover .caption 
    opacity: 1;

<div class="container">
    <span  class="image-block hover-me ng-scope" style="padding-right: 5px; padding-bottom: 5px; height: 257px; width: 269px;">
            <img class="hovertext"   src="http://i.imgur.com/zOEilgll.jpg">
           <span class="caption">This is a longish text of what looks like a camel; really quote a long long long long long long long long long long long long text</span>
    </span><span  class="image-block hover-me ng-scope" style="padding-right: 5px; padding-bottom: 5px; height: 257px; width: 385px;">
            <img class="hovertext"   src="http://i.imgur.com/jj1dY0sl.jpg">
           <span class="caption">Well this is quite a pretty picture too</span>
    </span><span  class="image-block hover-me ng-scope" style="padding-right: 10px; padding-bottom: 5px; height: 257px; width: 396px;">
            <img class="hovertext"   src="http://i.imgur.com/yVlWIc0l.jpg">
           <span class="caption">Omg what is this a black and white picture</span>
    </span><span  class="image-block hover-me ng-scope" style="padding-right: 0px; padding-bottom: 5px; height: 257px; width: 456px;">
            <img class="hovertext"   src="http://i.imgur.com/roRmFJWl.jpg">
           <span class="caption">This is just an ordinary truck, I think... maybe; but the discription is really quite long</span>
    </span><span  class="image-block hover-me ng-scope" style="padding-right: 5px; padding-bottom: 5px; height: 289px; width: 433px;">
            <img class="hovertext"   src="http://i.imgur.com/yo2WhKFl.jpg">
           <span class="caption">A great quote frm a great explorer</span>
    </span>
    <span>More images follow...</span>
</div>

【参考方案1】：

嗯，这很简单，你需要在这里使用 CSS 定位，使用 position: relative; 容器包装元素...我从头开始制作这个，看看它是否对你有用，如果你需要任何修改，请联系我。 .

说明：首先我创建.wrap 元素position: relative; 只是为了确保定位span 的嵌套absolute 保持相对于容器。

在下一个选择器（即.wrap span）中，我使用position: absolute; 代替span，其边距为负，故意溢出，以便隐藏。

进入下一个选择器，即.wrap:hover span 将显示span 元素的第一行。

最后一个选择器.wrap:hover span:hover 将显示其余文本。

Demo

Demo 2 ^{[1] 底部固定white-space}

.wrap 
    position: relative;
    display: inline-block;
    overflow: hidden;


.wrap span 
    position: absolute;
    bottom: -70px;
    background: rgba(0,0,0,.8);
    color: #fff;
    left: 0;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;


.wrap:hover span 
    bottom: -40px;


.wrap:hover span:hover 
    bottom: 0;

---

.wrap img 
    display: block;

^{[1] 将此添加到您的代码中以修复图像底部的white-space。}

注意：尺寸是固定的，如果您认为每个 缩略图可能会有很大的不同，我会推荐你​​使用 jQuery 并相应地设置span 元素的height。

【讨论】：

由于某种奇怪的原因，它似乎适用于第一张图像，但不适用于其他图像：jsfiddle.net/johnmurdoch/8EKJG

其实对短文本不起作用（什么都不显示）：jsfiddle.net/johnmurdoch/4LetQ

嗯，这显然是因为小文本不够高，仅从底部定位 -40px 时无法显示......

@JohnM 这就是为什么我在答案末尾的注释中说明了一些内容:) jsfiddle.net/4LetQ/2