Quiero crear una animación de borde al pasar el mouse sobre una imagen transparente como esta.

enter image description here

¿Se puede hacer esto con CSS?

(Por supuesto, sin crear dos imágenes, una sin el borde y otra con el borde, y cambiando la imagen al pasar el mouse)

Estoy abierto a usar una pequeña biblioteca js si la hay, pero no jQuery.

css
1
user9801251 8 sep. 2018 a las 14:40

5 respuestas

La mejor respuesta

Esquema con distancia aparente

Para imitar lo que muestra en la imagen, puede hacer esto ...

enter image description here

.laptop {
  margin:50px;
  background:url(https://i.imgur.com/PQcP7AC.png) no-repeat;
  width:400px;
  height:220px;
  transition:0.2s all;
 
}
.laptop:hover{
  filter: drop-shadow(4px 0 0 white) drop-shadow(0 4px 0 white) drop-shadow(-4px 0 0 white) drop-shadow(0 -4px 0 white) drop-shadow(6px 0 0 orange) drop-shadow(0 6px 0 orange) drop-shadow(-6px 0 0 orange) drop-shadow(0 -6px 0 orange);
}
<div class="laptop">

</div>
-1
Invariant Change 8 sep. 2018 a las 13:08

La función CSS drop-shadow() aplica un efecto de sombra paralela a la imagen de entrada. Obtenga más información al respecto en MDN Documentos web.

img{
  width:300px;
  height:300px;
  transition:0.2s all;
}
img:hover{
  filter:drop-shadow(4px 0 0px red) drop-shadow(0 4px 0 red) drop-shadow(-4px 0 0px red) drop-shadow(0 -4px 0 red);
}
<img src = "https://i.imgur.com/2oyDKF3.png">
0
chintuyadavsara 8 sep. 2018 a las 12:03

El uso de una propiedad drop-shadow css (como se muestra en otras respuestas) para imitar el desplazamiento requiere crear una sombra paralela más grande con el color deseado y luego cubrirlo con una sombra más estrecha con el color de fondo. Si queremos tener una solución universal que funcione para cualquier imagen colocada en cualquier fondo, tendremos que aprovechar los filtros svg (para referencia, consulte la documentación en MDN), ya que css aún no nos brinda tales capacidades. Tiene una muy buena cobertura del navegador (básicamente IE10 +). He creado dicho filtro en el fragmento a continuación.

El nodo <filter> incrustado en el ejemplo se creó con inkscape utilizando la herramienta de creación de filtros, luego se extrajo del archivo .svg guardado Los comentarios dentro del nodo <filter> indican qué parámetros deben cambiarse para ajustar el tamaño y los colores del resultado final. También he agregado un ligero color de fondo para mostrar que el efecto es independiente del fondo y crea el contorno ignorando una ligera sombra presente en la imagen de origen (justo debajo de la computadora portátil).

En caso de que necesite más información sobre cómo se compone el efecto, hágamelo saber en los comentarios.

img:hover{
  filter:url(#outline);
}
html {
  background-color: rgb(255, 244, 216);
}
<svg height="0">
    <filter
       style="color-interpolation-filters:sRGB"
       id="outline">
      <feComponentTransfer
         result="result10">
        <feFuncR
           type="identity" />
        <feFuncG
           type="identity" />
        <feFuncB
           type="identity" />
        <feFuncA
           type="gamma"
           tableValues=""
           intercept="10"
           amplitude="10"
           exponent="7"
           offset="0" />
      </feComponentTransfer>
      <!-- change the stdDeviation here for the outer diameter -->
      <feGaussianBlur
         stdDeviation="7"
         in="result10" />
      <feColorMatrix
         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 500 0 "
         result="result2" />
         <!-- change the stdDeviation here for the inner diameter -->
      <feGaussianBlur
         stdDeviation="4"
         in="result10"
         result="result5" />
      <feColorMatrix
         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 500 0 "
         result="result4" />
         <!-- change the flood-color here the outline color -->
      <feFlood
         result="result1"
         flood-color="rgb(255,165,0)" />
      <feComposite
         in="result2"
         in2="result4"
         operator="out"
         result="result3" />
      <feComposite
         in2="result3"
         operator="in"
         in="result1"
         result="result8" />
         <!-- change the stdDeviation here to smooth out the final outline -->
      <feGaussianBlur
         stdDeviation="0.3"
         result="result6" />
      <feBlend
         mode="overlay"
         in2="SourceGraphic"/>
    </filter>
</svg>
<img src="https://i.stack.imgur.com/tyyKx.png">
2
Piotr Wicijowski 8 sep. 2018 a las 14:43

Puede considerar que el filtro drop-shadow tiene un efecto similar:

.box {
  width:300px;
  height:200px;
  background:url(https://i.stack.imgur.com/tyyKx.png) left/200% 100% no-repeat;
  transition:0.3s;
}

.box:hover {
  filter:drop-shadow(0 0 10px red);
}
<div class="box">

</div>

Para esta imagen en particular y como lo sugiere @Mr Lister, puede hacer esto:

.box {
  width: 300px;
  height: 200px;
  background: url(https://i.stack.imgur.com/tyyKx.png) left/200% 100% no-repeat;
  transition: 0.3s;
}

.box:hover {
  filter: drop-shadow(5px 0 0px #fff) 
  drop-shadow(0 5px 0 #fff) 
  drop-shadow(-5px 0 0px #fff) 
  drop-shadow(0 -5px 0 #fff) 
  drop-shadow(4px 0 0px #fa2) 
  drop-shadow(0 4px 0 #fa2) 
  drop-shadow(-4px 0 0px #fa2) 
  drop-shadow(0 -4px 0 #fa2);
}
<div class="box">

</div>
0
Temani Afif 8 sep. 2018 a las 13:00

No hay una sola propiedad para hacer lo que desea directamente en la imagen. Puede hacer esto con una ruta SVG (borde) colocada en la imagen y mostrarla / ocultarla al pasar el mouse con opacidad, con svg seguramente guardará algo en las actuaciones, por desgracia, no hay más formas seguras de hacerlo.

-1
Sieen 8 sep. 2018 a las 12:11