图像悬停的边框

Question

在css的帮助下如何做到这一点？ 第二个（蓝色边框）是图像：悬停。

我想到了一张图片而不是另一张图片，最后一张图片带有边框。

Answer 1

边界总是在元素的外面......没有＆＃34;插入边界＆＃34;选项。

另一种选择是插入框阴影。

＆＃13;

＆＃13;

div {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-image: url(http://lorempixel.com/output/food-q-c-200-200-3.jpg);
    border-radius:16px;
    box-shadow: inset 0 0 0 15px rgba(255,255,255,0.5);
    transition:box-shadow 0.5s ease;
}

div:hover {
    box-shadow: inset 0 0 0 15px rgba(0,0,155,1);
}

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;

修改

内半径选项需要另一个元素。我在这个例子中使用过伪元素。

＆＃13;

＆＃13;

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-image: url(http://lorempixel.com/output/food-q-c-200-200-3.jpg);
    border-radius:16px;
    position: relative;
    overflow: hidden;
}

div::after {
    content: '';
    position: absolute;
    border-radius:16px;
    top:12px;
    left: 12px;
    height: calc(100% - 25px);
    width: calc(100% - 25px);
    z-index: 1;
    background: transparent;
    box-shadow: 0 0 0 32px rgba(255,255,255,0.8);
}

div:hover:after {
    box-shadow: 0 0 0 24px rgba(0,0,155,1);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用默认颜色设置边框。然后img：hover {---}

<div>
<img src="http://dummy-images.com/abstract/dummy-480x270-Bottles.jpg">
</div>

CSS

img{border:10px solid rgba(0,0,0,0.8);border-radius:8px;}
img:hover{border:10px solid blue;}

检查 Demo