transicion - Borde interno de CSS en la imagen al pasar el ratón

mostrar texto al pasar el mouse sobre una imagen html

Question

He estado buscando alto y bajo y, aunque hay muchos efectos de alto vuelo, esperaba tener algo simple que pudiera aplicar a las imágenes en una galería que acaba de poner un 10px de ancho, 40% de transparencia.

Muchos mostraron cómo hacer algo similar por imagen, pero solo quiero una clase que pueda asignar donde sea necesario.

Para ser justos, algunos de los complementos tenían esta opción, pero venían con otros 50, lo que parece excesivo.

Answer 1

Agregar un contenedor y un pseudo-elemento

No puede aplicar ningún estilo directamente a la imagen que le dará un borde insertado al pasar el mouse. Pero puede lograr el efecto deseado envolviendo cada imagen en algún tipo de elemento contenedor y agregando un pseudo-elemento ::after con el borde aplicado.

.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

Podría usar un recuadro box-shadow ejemplo

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

Margen

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

Si necesita tener este efecto sobre el hover , también podría usar una transition , por ejemplo

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

Para el borde he definido un color blanco con una opacidad del 40% . La imagen tiene un z-index negativo, z-index lo que la sombra insertada aplicada al elemento figure puede ser visible (por supuesto, no dude en utilizar un elemento contenedor diferente, si lo necesita)

Resultado