Как сделать анимацию появления svg при наведении на блок?

Question

[LastGeneral]

При наведении появляется элементы из-за картинки

<div class="services-content__item">
				<div class="services-content__title">
					<h4>Ремонт ноутбуков</h4>
				</div>
				<div class="services-content__imege">
					<img src="/wp-content/uploads/2021/02/printer.webp" alt="Ремонт ноутбуков">
					<div class="services-content__imege-wrapper">
						<div class="services-content__imege-container">
							<img src="/wp-content/uploads/2021/02/oval-1.svg" class="oval-1 smalls" style="transform: translate3d(0px, 0px, 0px);">
							<img src="/wp-content/uploads/2021/02/oval-2.svg" class="oval-2 smalls" style="transform: translate3d(0px, 0px, 0px);">
							<img src="/wp-content/uploads/2021/02/path-1.svg" class="path-1 smalls" style="transform: translate3d(0px, 0px, 0px);">
							<img src="/wp-content/uploads/2021/02/path-2.svg" class="path-2 smalls" style="transform: translate3d(0px, 0px, 0px);">
							<img src="/wp-content/uploads/2021/02/pattern.svg" class="pattern smalls" style="transform: translate3d(0px, 0px, 0px);">
							<img src="/wp-content/uploads/2021/02/rect-1.svg" class="rect-1 smalls" style="transform: translate3d(0px, 0px, 0px);">
							<img src="/wp-content/uploads/2021/02/pattern.svg" class="pattern smalls" style="transform: translate3d(0px, 0px, 0px);">
						</div>
					</div>
				</div>
				<div class="services-content__desc">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				</div>
			</div>

.services-content__item {
	min-height: 350px;
    padding: 1em;
    box-shadow: 0 0 0 rgb(23 38 47 / 30%), inset 0 0 0 1px #d7e5f4;
    background-color: #fff;
}
.services-content__imege {
    display: block;
    text-decoration: none;
    position: relative;
    margin: 0 -16%;
    height: 33%;
}
.services-content__imege > img {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 55%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    pointer-events: none;
    z-index: 6
}
.services-content__imege-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12.5%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}
.services-content__imege-container {
    position: relative;
    width: 100%;
    height: 100%
}
.services-content__imege .smalls {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    height: auto;
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity .1s linear .1s, -webkit-transform .9s cubic-bezier(.19, 1, .22, 1);
    transition: opacity .1s linear .1s, transform .9s cubic-bezier(.19, 1, .22, 1);
    transition: opacity .1s linear .1s, transform .9s cubic-bezier(.19, 1, .22, 1), -webkit-transform .9s cubic-bezier(.19, 1, .22, 1)
}
.services-content__item:hover .smalls {
    transition: opacity .1s linear 0s, -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
    transition: opacity .1s linear 0s, transform .7s cubic-bezier(.19, 1, .22, 1);
    transition: opacity .1s linear 0s, transform .7s cubic-bezier(.19, 1, .22, 1), -webkit-transform .7s cubic-bezier(.19, 1, .22, 1);
    opacity: 1
}
.services-content__imege .oval-1 {
    width: 14%;
    margin-left: -7%
}
.services-content__imege .oval-2 {
    width: 5%;
    margin-left: -2.5%
}
.services-content__imege .path-1,
.services-content__imege .path-2 {
    width: 14%;
    margin-left: -7%
}
.services-content__imege .rect-1 {
    width: 5%;
    margin-left: -2.5%
}
.services-content__imege .pattern {
    width: 19%;
    margin-left: -9.5%
}
.services-content__item p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
	color: #17262fb3;
}
@media (min-width:1601px) {
    .services-content__imege {
        height: 42%
    }
    .services-content__imege > img {
        width: 114%
    }
}
@media (min-width:1100px) {
    .services-content__item:hover {
        z-index: 6
    }
}

Cards = function () {
	function n(e, t) {
		var i = this;
		_classCallCheck(this, n),
			this.elements = [].slice.call(e),
			this.smalls = ["oval-1", "oval-2", "path-1", "path-2", "pattern", "rect-1", "pattern"],
			this.positions = [
			[{
				x: 55,
				y: 60
			},
			 {
				 x: -770,
				 y: -420
			 },
			 {
				 x: -170,
				 y: 60
			 },
			 {
				 x: 31,
				 y: -152
			 },
			 {
				 x: 70,
				 y: 24
			 },
			 {
				 x: 867,
				 y: -132
			 },
			 {
				 x: -96,
				 y: -110
			 }],
			[{
				x: 54,
				y: -160
			},
			 {
				 x: 420,
				 y: 357
			 },
			 {
				 x: -146,
				 y: -146
			 },
			 {
				 x: 130,
				 y: 27
			 },
			 {
				 x: -110,
				 y: 12
			 },
			 {
				 x: -828,
				 y: -445
			 },
			 {
				 x: 205,
				 y: -110
			 }],
			[{
				x: -288,
				y: -84
			},
			 {
				 x: 810,
				 y: 430
			 },
			 {
				 x: 64,
				 y: 70
			 },
			 {
				 x: 10,
				 y: -152
			 },
			 {
				 x: -96,
				 y: -110
			 },
			 {
				 x: -568,
				 y: 290
			 },
			 {
				 x: 189,
				 y: 20
			 }]
		]}
	([{
        key: "addMouseListeners",
        value: function (n) {
            var s = this;
            n.addEventListener("mouseenter", function (e) {
                var t = n.querySelector(".services-content__imege"),
                    i = (t.offsetWidth, t.offsetHeight, [].slice.call(n.querySelectorAll(".smalls"))),
                    r = Math.floor(Math.random() * s.positions.length);
                i.forEach(function (e, t) {
                    var i = s.positions[r][t].x,
                        n = s.positions[r][t].y;
                    e.style.transform = "translate3d(" + i + "%, " + n + "%, 0)"
                })
            }),
                n.addEventListener("mouseleave", function (e) {
                [].slice.call(n.querySelectorAll(".smalls")).forEach(function (e) {
                    e.style.transform = "translate3d(0, 0, 0)"
                })
            })
        }
    },
    {
        key: "generateSmalls",
        value: function (e) {
            var t = e.querySelector(".services-content__imege"),
                i = document.createElement("DIV"),
                n = document.createElement("DIV");
            i.classList.add("services-content__imege-wrapper"),
                n.classList.add("services-content__imege-container"),
                this.smalls.forEach(function (e) {
                var t = "/wp-content/uploads/2021/02/" + e + ".svg",
                    i = new Image;
                i.src = t,
                    i.classList.add(e, "smalls"),
                    n.appendChild(i)
            }),
                i.appendChild(n),
                t.appendChild(i)
        }
    }])
}

Answer 1

[Олег]

На CSS можно сделать, если вам нужны простые смещения

/*для блоков, которые будут у вас выкатываться задаёте такой стиль:*/
/*изначальные позиции анимации*/
.services-content__imege-container .oval-1{
   position:absolute;
   left: /*изначальная позиция*/;
   top: /*изначальная позиция*/;
   width: /*ширина блока*/;
   height: /*высота блока*/;
   transition: all .5s; /*длительность анимаций всех свойств 0.5 секунды*/
}
.services-content__imege-container .oval-2{
   position:absolute;
   left: /*изначальная позиция*/;
   top: /*изначальная позиция*/;
   width: /*ширина блока*/;
   height: /*высота блока*/;
   transition: all .5s; /*длительность анимаций всех свойств 0.5 секунды*/
}
/*обязательно сделайте position:relative для родителя анимируемых блоков*/
.services-content__imege-container{
   position:relative; {/*это чтобы анимируемые блоки позиционировались относительно родителя*/}
}
/*конечные позиции анимации блоков*/
.services-content__imege .services-content:hover__imege-wrapper .services-content__imege-container .oval-1{
      left: /*конечная позиция*/;
      top: /*конечная позиция*/;
}
.services-content__imege:hover .services-content__imege-wrapper .services-content__imege-container .oval-2{
      left: /*конечная позиция*/;
      top: /*конечная позиция*/;
}/*...
...и аналогично остальные анимируемые объекты*/

С помощью свойства transition вы можете анимировать ещё opacity (прозрачность), ширину, высоту, box-shadow, color и background-color

P.S. а почему imege_container, а не image_container ?)