添加半边框以悬停图片

Question

我目前有一个悬停图片，我希望添加一个右边框＃000，它只占图像全长的80％。我一直试图修改其他“半边界”代码，以便为正确的边界工作无济于事。

任何人都知道怎么做？

Answer 1

披露：从here复制，但有一些更改。

这会有效吗？

＆＃13;

＆＃13;

#holder {
        border: 1px solid #000;
        height: 200px;
        width: 200px;
        position:relative;
        margin:10px;
} 
#mask {
        position: absolute;
        top: -1px;
        left: -1px;
        height: 80%;
        width: 1px;
        background-color: #fff;
}

＆＃13;

<div id="holder">
        <div id="mask"></div>
</div>

    

＆＃13;

＆＃13;

＆＃13;

Answer 2

我的建议是为您的图片创建80％高度的叠加层。

pnl

以下是一个有效的例子：http://jsfiddle.net/dLk6xrvr/