I'm working on a service section that works with tabs and has 2 components:

1. Services tabs. Where I show each service with their respective title and description.

2. Service Info. Where I show the full information for the selected service.

I've already made it work. If you click on a service (1) it will display the detailed info on the service info div (2). It works by creating the Service Info (2) beforehand and toggling display on and off using JS.

So far so good... But I don't want the Service Info to just show up; I want to make it so that when you click a service (1), then it's icon and title animate and position themselves just in the right position inside the Service Info container (2). So it looks more elegant than just showing up the info.

Example:

I've already made some progress, but I'm afraid I'm not doing it right. Since I am using CSS transform: translate, and manually positioning the elements by moving them (x,y) px from their origin.

/* .TabNavItem represents a tab from Service Tabs (1)
And JS sets the .active class to the clicked tab */
.tabNavItem h3 {
  transition: ease-in-out 0.3s;
}

#tab1.active .serviceIconContainer {
  opacity: 0.2;
  transform: translate(0px, 260px);
}
#tab1.active h3 {
  transform: translate(315px, 130px) scale(1.5);
}

Is there any way to make the elements center themselves to the Service Info (2) div, instead of doing it manually with transform translate?

And is there any way to make the Service Tab (1), for the selected service, hide itself from the Tabs container without the elements inside it disappearing? That way, on the Tabs Container (1) it shows only the inactive services for you to click?

I tried doing:

.tabNavItem.active {
  visibility: hidden;
}

But the icon and h3 disappear too

Example: