图像悬停时的边框

Question

在 css 的帮助下有什么想法吗？第二个（蓝色边框）是带有 :hover.

的图像

我考虑了一张图片而不是另一张图片，最后一张有边框。

Answer 1

设置边框为默认颜色。然后 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

Answer 2

边框总是在元素的外面...没有 "inset border" 选项。

另一种方法是插入框阴影。

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

<div>
</div>

编辑：

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

* {
    -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);
}

<div></div>

图像悬停时的边框

Border on image hover

css

hover