在图像悬停时 - 添加一个获取图像宽度的标题

Question

好。所以我要做的就是让它当我将鼠标悬停在图像上时，图像从黑白/灰度变为彩色，并在底部显示文本，这是一个超链接。到目前为止我有这个。

由于我无法弄清楚如何使用stackoverflow代码，我将链接到我的网页。 enter link description here

感谢。 ：）

Answer 1

最初使用display: none设置锚点，然后在悬停时将其设置为display: block。

<强> FIDDLE

注意：为了获得适合img宽度的锚点的宽度 - 没有手动固定容器div上的宽度 - 我使用了我所描述的技术之一in this post。

标记

<div>
    <img src="http://lorempixel.com/400/200" alt="" />
    <a href="#">Some link</a>
</div>

CSS

div {
    display:table;
    width: 1px;
}
img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    box-sizing: border-box;
}
div:hover img {
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    filter: none;
}
a {
    display: none;
    position: relative;
    top: -45px;
    height: 40px;
    text-decoration: none;
    padding: 8px 0 0 12px;
    box-sizing: border-box;
}
div:hover a {
    display: block;
    background: rgba(0,0,0,.8);
    color: #fff;
    text-transform: uppercase;
}