悬停时放大图形：不要增加其周围边框的大小

Question

我的 html 中有下图和标题：

<figure id="pub_img"><img src="images/{{image.link}}" >
    <figcaption>{{image.caption}}</figcaption>
    </figure>

下面的 CSS 代码除其他外还执行以下操作：

• 确保图形和图片符合宽度并向右浮动
• 在图像和标题周围制作 1 像素的黑色边框
• 悬停时，放大整个图形-img-标题结构。

我有一个无法解决的问题：

缩放还增加了 1px 黑色边框——这变得相当难看。我不知道如何在不增加边框的情况下增加图形、img、figcaption。

我该怎么办？

#pub_img:hover {
  -webkit-transform: scale(4);
  -moz-transform: scale(4);
  -o-transform: scale(4);
  transform: scale(4);
}

#pub_img {
  border: 1px solid #555;
  float: right;
  width: 80px;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

figure {
  display: table;
  border: 1px solid red;
  width: 80px;
}

figure img {
  width: 100%;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}

figure figcaption {
  border-top: 0.1px solid gray;
  background-color: #ffffff;
  font-size: 0.2em;
  text-align: justify;
}

<figure id="pub_img"><img src="https://picsum.photos/600/300">
  <figcaption>Lorem Ipsum</figcaption>
</figure>

Answer 1

仅使用 CSS：您不能为此使用缩放，它类似于

opacity

属性（它需要是

rgba

，否则会影响整个元素）。这里我们需要增加

width

的

figure

和

font-size

的

figcaption

，而不是缩放它，像这样：

#pub_img:hover {
  width: 325.33px;
}

#pub_img:hover figcaption {
  font-size: 1.2em;
}

#pub_img {
  border: 0.25px solid #555;
  float: right;
  width: 80px;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

figure {
  display: table;
  border: 1px solid red;
  width: 80px;
}

figure img {
  width: 100%;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}

figure figcaption {
  border-top: 0.1px solid gray;
  background-color: #ffffff;
  font-size: 0.2em;
  text-align: justify;
}

<figure id="pub_img"><img src="https://picsum.photos/600/300">
  <figcaption>Lorem Ipsum</figcaption>
</figure>