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

时间:2014-02-16 09:15:43

标签: html css image hover

我正在开发图片库,并希望以下列方式在图片底部显示标题:

  • 默认情况下,图片显示时没有任何文字

  • 将鼠标悬停在图像上时,底部会出现一个(可能是截断的)标题,背景为深灰色的半透明背景

  • 最好,我的HTML保持不变;最重要的是,图像保持为'display:inline-block',因为布局需要它们。

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

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

请参阅图解说明:
Graphical Explanation

这有点类似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" 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>

1 个答案:

答案 0 :(得分:3)

嗯,这很简单,你需要CSS定位,使用position: relative;容器包装元素...我从头开始做这个,看看它对你有用,如果你需要任何修改,只需ping我..

说明:首先制作.wrap元素position: relative;,以确保嵌套absolute定位span相对于容器。

在下一个选择器中.wrap span使用position: absolute; span.wrap:hover span,其余为负边距,故意溢出,以便隐藏。

来到下一个选择器,span将显示.wrap:hover span:hover元素的第一行。

最后一个选择器white-space将显示文本的其余部分。

Demo

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;
}

white-space

[1]将其添加到您的代码中以修复图片底部的height

  

注意:如果您考虑每个尺寸,则尺寸是固定的   缩略图可能会在很大程度上有所不同,我建议您使用   jQuery并相应地设置span元素的{{1}}。