使图像布局为“内联块”在底部有悬停标题 [英] Make images layed out as 'inline-block' have on-hover titles on the bottom

问题描述

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

• 将鼠标悬停在图像上时，深灰色半透明底部会出现一个透明背景




• 优选地，我的HTML保持原样;最重要的是图像保持为'display：inline-block'，因为它们是布局所需的。




• （可选）将鼠标悬停在标题




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

  $ b

请参阅图解说明：

这有点类似于 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;左：0; right：0; bottom：0; z-index：1;背景：rgba（128,128,128，.5）; transition：all .5s ease; opacity：0;}。hover-me .caption {display：block;身高：50％ position：absolute; top：50％;左：0; right：0; margin-top：-10px; text-align：center; transition：all .5s ease;不透明度：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-scopestyle =padding-right：5px; padding-bottom：5px; height：257px; width：269px;> < img class =hovertextwidth =269height =257src =http://i.imgur.com/zOEilgll.jpg> < span class =caption>这是一个长长的文本，看起来像一只骆驼;真正引用长长长长长长长长长长长长长文本< / span> < / span>< span class =image-block hover-me ng-scopestyle =padding-right：5px; padding-bottom：5px; height：257px; width：385px;& < img class =hovertextwidth =385height =257src =http://i.imgur.com/jj1dY0sl.jpg> < span class =caption>这是一个很漂亮的图片< / span> < / span>< span class =image-block hover-me ng-scopestyle =padding-right：10px; padding-bottom：5px; height：257px; width：396px;& < img class =hovertextwidth =396height =257src =http://i.imgur.com/yVlWIc0l.jpg> < span class =caption> Omg这是一张黑白图片< / span> < / span>< span class =image-block hover-me ng-scopestyle =padding-right：0px; padding-bottom：5px; height：257px; width：456px;& < img class =hovertextwidth =456height =257src =http://i.imgur.com/roRmFJWl.jpg> < span class =caption>这只是一辆普通的卡车，我想...也许;但是说法真的很长< / span> < / span>< span class =image-block hover-me ng-scopestyle =padding-right：5px; padding-bottom：5px; height：289px; width：433px;& < img class =hovertextwidth =433height =289src =http://i.imgur.com/yo2WhKFl.jpg> < span class =caption>一个伟大的报价frm一个伟大的探险家< / span> < / span> < span>更多图片关注...< / span>< / div>  

解决方案

这很容易，你需要CSS Positioning在这里，使用 position：relative; container ...我从头开始，看看它对你有用，如果你需要任何修改，只是ping我..

说明：首先， .wrap 元素 position：relative; 只是为了确保嵌套 absolute c> .wrap span am使用 position：absolute; 用于具有负边距的 span

进入下一个选择器ie .wrap：hover span 会显示 span 元素的第一行。

最后一个选择器是 .wrap： hover span：hover 将显示文本的其余部分。

演示

演示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]将此代码添加到代码中以修复<$}

注意：图片底部会显示c $ c> white-space 尺寸是固定的，如果你认为每个
缩略图的文本可能会有很大的变化，我会建议你使用
jQuery并设置 height span 元素的。

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

• 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:

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>

解决方案

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

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

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.

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

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

Demo

Demo 2 ^{[1] Fixed white-space at the bottom}

.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] Add this to your code to fix the white-space at the bottom of the image.}

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.

这篇关于使图像布局为“内联块”在底部有悬停标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！