悬停时图像上的 CSS 内边框

Posted 2023-03-06

【中文标题】悬停时图像上的 CSS 内边框

【英文标题】：CSS Inner Border on Image on Hover

【发布时间】：2015-07-07 09:48:12

【问题描述】：

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

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

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

【问题讨论】：

我认为这个解决方案与列出的可能重复的解决方案不同，对我来说效果很好，而另一个没有。

【参考方案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>

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

---

结果

【讨论】：

我喜欢这个过渡，但我想让它成为一个像上面那样的类，所以我选择它作为解决方案。不过在这方面做得很好，我真的很感激！