CSS Inner Border on Image on Hover

Question

Been searching high and low and while there are great many fancy hover effects, I was hoping to have something simple that I could apply to images in a gallery that just put a 10px wide, 40% transparency.

Many showed how to do something similar per image but I just want a class I can assign where needed.

To be fair, some of the plugins did have this option but they came with 50 others which seems overkill.

Answer 1

Add a wrapper and pseudo-element

You cannot apply any style directly to the image that will give it an inset border on hover. But you can achieve the desired effect by wrapping each image in some kind of container element and adding an ::after pseudo-element with the applied border.

.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

You could use an inset box-shadow e.g.

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

Markup

<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;
}

If you need to have this effect on hover you could also use a transition, e.g.

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;
}

For the border I've defined a white colour with a 40% opacity. The image has a negative z-index so the inset shadow applied to the figure element can be visible (of course feel free to use a different wrapper element, if you need)

---

Result