html 链接悬停图像

Posted 2021-05-11

http://jsfiddle.net/ruisoftware/ZSZQK/7/


<figure>
    <img src="http://placekitten.com/200/100" />
    <figcaption>
    <a href="http://google.com">VIEW</a>
    </figcaption>
</figure>

<figure>
    <img src="http://placekitten.com/200/100" />
    <figcaption>
    <a href="http://google.com">VIEW2</a>
    </figcaption>
</figure>



<style>
figure {
    position: relative;
    display: inline-block;
}

figcaption {
    display: none;
    position: absolute;
    left: 0;
    bottom: 50%;
    right: 0;
    text-align:center;
    /* background-color: rgba(0,0,0,.15); */
}

figure:hover img {
    opacity: .6;
}

figure:hover figcaption {
    display: block;
}
</style>