html - 带图片幻灯片的 href

Question

我在一张图片上放了一张幻灯片，你可以在这里看到

http://jsfiddle.net/xt94eah2/4/

当您将鼠标悬停在示例图片上时，您会看到一个标题。但是，如何在其中添加链接？

因此，只有当您将鼠标悬停并看到带有更多信息的灰色部分时，您才可以单击该图像，它会转到一个链接，例如 w3schools。

我这里有代码

    <div class="image revealUpFull">
        <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />
        <span class="title">Caption <br / ><br / > with some more info</span>
    </div>
</div>

和 CSS

div.container {
    margin: 50px auto;
    width: 675px;
}

div.image {
    position: relative;
    overflow: hidden;
    width: 260px;
    height: 195px;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;

    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.3);
}

img {
    position: absolute;
    left: 0;
    top: 0;

    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

span.title {
    width: 260px;
    height: 20px;
    position: absolute;
    background: rgba(30,30,30,0.9);
    text-align: center;
    padding: 5px 0 4px;
    font-size: 14px;
    color: white;
    font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;

    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;

}
div.image.revealUpFull span { 
    height: 195px;
    width: 260px;
    bottom: -150px;
}

div.image.revealUpFull:hover img {
    top: -150px;
}

div.image.revealUpFull:hover span {
    bottom: 0px;
}

Answer 1

如果我对您的问题回答正确，这就是您可以做的(您希望整个幻灯片区域都可以点击？)。所以你可以同时制作 span和 a具有区域的完整宽度和高度。

演示: http://jsfiddle.net/xt94eah2/7/

div.image.revealUpFull span {
    height: 141px;
    width: 150px;
    bottom: -120px;
    display: block;
}
div.image.revealUpFull span a {
    display: block;
    height: 100%;
    width: 100%;
    color: white;
}

对标记进行了一些更正。

1. 最后</div>不匹配。

2. 内联 <img src="" width="150px" height="150px" />错了，应该是width="150" height="150"没有 px .