CSS 悬停时图像上的内边框

Question

一直在上下搜索，虽然有很多花哨的悬停效果，但我希望有一些简单的东西可以应用于画廊中的图像，只需放置 10 像素宽、40% 的透明度。

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

公平地说，有些插件确实有这个选项，但它们附带了 50 个其他插件，这似乎有点过分了。

Answer 1

您可以使用插图 box-shadow 例如

标记

<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 元素的嵌入阴影（当然，如果需要，可以随意使用不同的包装元素）

结果

Answer 2

添加包装器和伪元素

您不能将任何样式直接应用到图像，这将在悬停时为其添加内嵌边框。但是您可以通过将每个图像包装在某种容器元素中并添加一个带有应用边框的 ::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>

CSS 悬停时图像上的内边框

CSS Inner Border on Image on Hover

css

image

hover

border

添加包装器和伪元素