悬停时图像上的 CSS 内边框

Question

一直在搜索高低，虽然有很多花哨的悬停效果，但我希望有一些简单的东西可以应用于画廊中的图像，只需放置 10 像素宽、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 元素的嵌入阴影可以看到（当然，如果需要，可以随意使用不同的包装元素）

---

结果