在图像悬停-添加一个标题，以图像的宽度

Question

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

因为我不知道如何使用堆栈溢出代码，所以我将链接到我的网页。在这里输入链接描述

谢谢。:)

Answer 1

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

小提琴

注意:为了获得锚的宽度以适应img宽度--而不是手动地固定容器div上的宽度--我使用了我描述的在这个岗位上技术之一。

标记

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