Zoom on figure on hover: don't increase size of border surrounding it

Question

I have the following figure with caption in my html:

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

The css code below does among other things the following:

• Make sure figure and img adhere to the width and float to the right
• Make a 1 px black border around the image and the caption
• On hover, enlarge the entire figure-img-caption construct.

I have an issues that I can't get right:

The zoom also increases the 1px black border -- which becomes quite ugly. I'm not sure how to increase the figure, img, figcaption, without increasing the border given to them.

How would I go about this?

#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

You can't use scaling for that. It's an analogue to the opacity property on transparency, (it needs to be rgba, otherwise it will affect the entire element). Here we need to increase the width of the figure and the font-size of the figcaption, not scale it, like so:

#pub_img:hover {
  width: 325.33px;
}

#pub_img:hover figcaption {
  font-size: 1.5em;
  font-weight: 600;
}

#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>

Alternative version where text zoom is delayed:

#pub_img:hover {
  width: 325.33px;
}

#pub_img:hover figcaption {
  font-size: 1.5em;
  font-weight: 600;
}

#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;
}

figcaption > div {
  overflow: hidden;
}



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

  display: grid;
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
  transition-delay: 0.1s;
}

figure:hover figcaption {
  grid-template-rows: 1fr;
}

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