悬停图像上的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可以看到应用于元素的插入阴影(当然,如果需要,可以随意使用不同的包装元素)

结果