html - 悬停时显示全尺寸图像

Question

我知道这对某人来说将是一个简单的答案，但我似乎无法掌握它。

我需要的只是将鼠标悬停在图像上时将图像的大小从 20% 大小增加到 100% 大小

我正在尝试使用 CSS 使用变换比例来完成此操作，但我遇到了一个问题，即留下空白以适应整个图像的大小。

我更希望图像周围的文本随着图像缩放而响应移动。从我读到的我应该使用单独的容器来解决这个问题，但我无法让它工作。

我一直在尝试我在文章中读到的不同的东西，但没有一个能够解决我的问题。

这是我一直在使用的 css。这是我最接近我想要的东西，但我仍然对空白有问题。

.procedureimage{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
transform-origin: 0% 0%;
display: block;
transform: scale(0.2);
}

.procedureimage:hover{
transform: scale(1);
}

标签： htmlcssscale