Прозрачный изогнутый контур изображения (не прямоугольник)

Question

Я хочу создать рамочную анимацию при наведении на прозрачное изображение, например, так.

Можно ли это сделать с помощью css?

(Конечно, без создания двух изображений - одного без рамки и одного с рамкой - и изменения изображения при наведении)

Я открыт для использования небольшой библиотеки js, если она есть, но не для jQuery.

Answer 1

Использование свойства drop-shadow css (как показано в других ответах) для имитации смещения требует создания большей тени с желаемым цветом, а затем накрытия более узкой тенью с цветом фона. Если мы хотим иметь универсальное решение, которое работало бы с любым изображением, размещенным на любом фоне, нам нужно было бы использовать фильтры SVG (для справки см. документацию по MDN ), поскольку css еще не дает нам такого возможностей. У него очень хорошее покрытие браузера (в основном IE10 +). Я создал такой фильтр во фрагменте ниже.

Узел <filter>, встроенный в пример, был создан с помощью inkscape с использованием инструмента создания фильтра, а затем извлечен из сохраненного файла .svg. Комментарии внутри узла <filter> указывают, какие параметры необходимо изменить, чтобы настроить размер и цвет конечного результата. Я также добавил небольшой фоновый цвет, чтобы показать, что эффект не зависит от фона и создает контур, игнорируя небольшую тень на исходном изображении (прямо под ноутбуком).

Если вам нужна дополнительная информация о том, как составляется эффект, дайте мне знать в комментариях.

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">

Answer 2

Схема с видимым расстоянием

Чтобы имитировать то, что вы показываете на изображении, вы можете сделать это ...

.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>

Answer 3

CSS-функция drop-shadow() применяет эффект падающей тени к входному изображению. Подробнее об этом читайте в MDN Веб-документах.

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">

Answer 4

Нет ни одного свойства, чтобы делать то, что вы хотите прямо на изображении. Вы можете сделать это с помощью пути SVG (границы), размещенного на изображении, и показать / скрыть его при наведении с непрозрачностью, с помощью svg вы наверняка что-то сохраните в выступлениях, увы, больше нет других безопасных способов сделать это.

Answer 5

Можно считать, что фильтр drop-shadow имеет аналогичный эффект:

.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>

Для этого конкретного изображения и, как предлагает @Mr Lister, вы можете сделать это:

.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>