Как с помощью CSS сделать плавный разъезд картинок в стороны при наведении курсора?

Question

Из картинок в виде 3 треугольников на сайте состоит один большой, они частично перекрывают друг друга.
Как в CSS (через hover?) реализовать плавный разъезд треугольников в сторону угла каждого, чтобы общий треугольник как бы ощутимо распадался на 3 части, а после отвода курсора возвращался обратно?

.parent {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div1 {
  grid-area: 3 / 11 / 9 / 15;
  opacity: .5;
}

.div2 {
  grid-area: 5 / 11 / 11 / 15;
}

.div3 {
  grid-area: 4 / 10 / 10 / 14;
}

<div class="parent">
  <div class="div1">
    <img src="треугольник верхний.svg" alt="top">
  </div>
  <div class="div2">
    <img src="треугольник правый.svg" alt="right">
  </div>
  <div class="div3">
    <img src="images/треугольник левый.svg" alt="left">
  </div>
</div>

Answer 1

В принципе, просто сделать translate

svg path {
  fill: none;
  stroke: red;
  stroke-width: 3px;
  transition: 0.34s linear;
}

svg path:nth-of-type(1) {
  transform: translate(1px, -2px)
}

svg path:nth-of-type(2) {
  transform: translate(-5px, 0)
}

svg path:nth-of-type(3) {
  transform: translate(5px, 5px)
}

svg:hover path {
  transform: translate(0, 0)
}

<svg width="200" version="1.1" viewBox="0 0 128.55 126.05" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-33.902 -25.849)" fill="none" stroke="#000" stroke-width=".23833px">
  <path d="m130.55 97.148-32.044-61.27-48.524 90.965"/>
  <path d="m113.5 65.28 38.025 73.709-51.433-0.19518"/>
  <path d="m132.2 138.91-88.574-0.20337 38.469-72.586"/>
 </g>
</svg>

И тоже самое по hover

svg path {
  fill: none;
  stroke: red;
  stroke-width: 3px;
  transition: 0.34s linear;
}

svg:hover path:nth-of-type(1) {
  transform: translate(1px, -2px)
}

svg:hover path:nth-of-type(2) {
  transform: translate(-5px, 0)
}

svg:hover path:nth-of-type(3) {
  transform: translate(5px, 5px)
}

<svg width="200" version="1.1" viewBox="0 0 128.55 126.05" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-33.902 -25.849)" fill="none" stroke="#000" stroke-width=".23833px">
  <path d="m130.55 97.148-32.044-61.27-48.524 90.965"/>
  <path d="m113.5 65.28 38.025 73.709-51.433-0.19518"/>
  <path d="m132.2 138.91-88.574-0.20337 38.469-72.586"/>
 </g>
</svg>

БЛОГ НА HUSL

Как с помощью CSS сделать плавный разъезд картинок в стороны при наведении курсора?

Ответы (1 шт):