Mimicking transform scale

HTML & CSS
1

transform: scale(1.1);

My code red svg not centered.

Do I have this written wrong?

.jacket-left .circle:hover,
.jacket-left .circle:hover .play path {
  transform: scale(1.1);
  border: 1px solid red;
  fill: red;
}

Not centered:
transform: scale(1.1);

Spotify centered:
transform: scale(1.1);

By using this:

.jacket-left .circle:hover,
.jacket-left .circle:hover .play path {
  transform: scale(1.1);
  border: 1px solid red;
  fill: red;
}

I tried to simplify it instead of using all this:

Which shows it centered here.
https://jsfiddle.net/hxvbnc1L/1/

.jacket-left .circle:hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid red;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
}

.jacket-left .circle:hover .play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 24.2px;
  height: 41.8px;
  fill: red;
}
2

Update*

I think I may have figured it out.

.jacket-left .circle:hover {
  border: 1px solid red;
  transform: scale(1.1);
}

.jacket-left .circle:hover .play {
  fill: red;
}
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.