悬停图像上的CSS内边框

Question

一直在寻找高低，虽然有许多奇特的悬停效果，但我希望能有一些简单的东西，我可以应用于画廊中的图像，只需要10px宽，40％的透明度。

许多人展示了如何为每张图片做类似的事情，但我只想要一个我可以在需要的地方分配的课程。

公平地说，有些插件确实有这个选项，但是他们带来了50个看起来有点过分的插件。

Answer 1

添加包装器和伪元素

您不能将任何样式直接应用于将在悬停时为其添加插入边框的图像。但是，您可以通过将每个图像包装在某种容器元素中并使用应用的边框添加::after伪元素来实现所需的效果。

.border {
  display: inline-block;
  position: relative;
}
.border::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 0 rgba(255,255,255,.5);
  transition: box-shadow .1s ease;
}
.border:hover::after {
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.5);
}
img {
  display: block;
  position: relative;
}

<div class="border">
  <img src="http://placehold.it/150" />
</div>

Answer 2

您可以使用插入box-shadow，例如

http://codepen.io/anon/pen/qdEJGj

<强>标记

<figure>
  <img src="http://lorempixel.com/300/300/nature/" />
</figure>

<强> CSS

figure {
    display: inline-block;
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .4);
}

figure img {
    display: block;
    position: relative;
    z-index: -1;
}

如果您需要对hover产生此效果，您还可以使用transition，例如

figure {
    display: inline-block;
    box-shadow: inset 0 0 0 10px rgba(255,255,255, 0);
    transition: all .5s 0s;
}

figure:hover {
    box-shadow: inset 0 0 0 10px rgba(255,255,255, .4);
}

figure img {
    display: block;
    position: relative;
    z-index: -1;
}

对于边框，我定义了一种40%不透明度的白色。图像具有负z-index，因此可以看到应用于figure元素的插入阴影（当然，如果需要，可以随意使用不同的包装元素）

<强>结果