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

2022-01-22 00:00:00 image hover html css

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

I'm developing an image gallery and want to display titles on the bottom of an image in the following way:

  • 图片默认不显示任何文字

  • Image is shown without any text by default

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

When hovering mouse over image, a (possibly truncated) title appears on the bottom on a dark-gray semi-transparent background

最好我的 HTML 保持原样；最重要的是，图像保持为显示:内联块"，因为这是布局所需要的.

Preferably, my HTML stays as is; most importantly the images remain as 'display: inline-block' as that's how they are needed for the layout.

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

(Optional) When hovering over the title (if it was truncated) it is expanded fully

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

(Optional) Titles can contain links / whole image is a link

请看图解说明:

Please see a graphical explanation:

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

This is somewhat similar to how http://www.flickr.com/explore and many other sites do it.

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

Here is what I have so far (not too much, actually, as it renders the title in the vertical middle, not on the bottom):

.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" width="269" height="257" 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" width="385" height="257" 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" width="396" height="257" 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" width="456" height="257" 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" width="433" height="289" 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>

推荐答案

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

Well, it's pretty easy, you will need CSS Positioning here, wrap the element using position: relative; container... I made this from scratch, see if it's useful to you, if you need any modifications, just ping me..

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

Explanation: First am making the .wrap element position: relative; just to make sure the nested absolute positioned span stays relative to the container.

在下一个选择器中，即 .wrap span 使用 position: absolute; for span 有一个负边距，这是故意溢出的，让它隐藏起来.

In the next selector i.e .wrap span am using position: absolute; for span with a negative margin, which is deliberately overflown, so that it hides.

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

Coming to next selector i.e .wrap:hover span will show the first line of the span element.

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

And the last selector which is .wrap:hover span:hover will show the rest of the text.

演示

Demo 2 [1] 固定底部的空白

.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.

Note: The dimensions are fixed, if you think the text for each thumbnail may vary to a great extent, than I will recommend you to use jQuery and set the height of the span elements accordingly.

相关文章