在图像上显示<div>或<span>:悬停

Question

我正在寻找一种方法,当你覆盖那个图像时,它允许一个div或span元素出现在:hover图像上.我可以使用.image:hover ~ .overlay它来做到这一点,但这并不是我正在寻找的.所述div或span元件需要所拍摄的图像的尺寸,因为会有多个尺寸.

例

<img width="200" height="200"/>允许你:hover将divor span元素更改display: none为display: block(不一定需要是一个块).从不可见变为可见的元素必须自动检测图像的大小,并将元素的大小与这些相同的维度(200x200)相匹配.但是,我也<img width="300" height="400"/>可能需要元素匹配大小(300x400).

我也在寻找一种超级简单的方法,让这些元素完美地定位在图像上.

这是我的代码笔,显示我到目前为止所拥有的内容.

Answer 1

与我给出的这个答案类似,你可以绝对地定位.overlay元素相对于父元素,并给它一个高度和宽度100%应该适用于所有img大小,因为父元素将是inline-block(它的大小与其包含元素相同).

这里的例子

HTML结构:

<div class="image">
    <img src="..." />
    <div class="overlay">The content to be displayed on :hover</div>
</div>

一般CSS:

.overlay默认情况下隐藏元素,并使用选择器.image:hover .overlay更改悬停时的样式.由于HTML结构,这很好用,因为它.overlay是一个后代元素.因此,您可以尽量避免使用通用/相邻兄弟组合程序+,~.Box-sizing用于计算元素相对于边框,填充等的尺寸.

.image {
    position:relative;
    display:inline-block;
}
.overlay {
    display:none;
}
.image:hover .overlay {
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;

    /* All other styling - see example */

    img {
        vertical-align:top; /* Default is baseline, this fixes a common alignment issue */
    }
}