CSS изображение увеличить при наведении

Question

Мне удалось создать эффект увеличения изображения при наведении.Однако проблема в том, что изображение перемещается в правый нижний угол, когда мышь находится над.Я хотел бы увеличить масштаб до центра.Как это возможно?

Я пытался использовать transform scale(1.1);, и он работает для увеличения масштаба до центра-центра, но тогда эффект перехода не работает.Таким образом, изображение просто переходит на 1.1 при наведении мыши, и эффект больше не является плавным.

PS Я использую Joomla и SP Page Builder

.sppb-col-md-3
{
  overflow: hidden; 
}
.hover03
{
  height: 100%;
  width: 100%;

          transition: all 1s ease;
}
.hover03:hover
{
  width: 110%;
  height: 110%;
}

Answer 1

Вы должны применить переход к элементу, тег img в вашем случае и эффект (то есть transform: scale;) на: hover.Надеюсь, это поможет!

Посмотрите на этот рабочий пример:

https://codepen.io/Angel-SG/pen/JwJzxg

.img-outer {
      overflow: hidden;
      max-width: 300px;
      max-height: 300px;

    }

    .img-inner {
      position: relative;

    }

    img {
      transition: 0.5s ease; 
    }

    img:hover {
      transform: scale(1.2);
    }

    <div class="img-outer">
     <div class="img-inner">
      <img src="https://via.placeholder.com/300C/O 
      https://placeholder.com/" alt="image">
     </div>
    </div>