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 2 issues that I can’t get right:

1. On my phone (Safari on iOS) the Figures increase in size when touched on. I like that, since there is no hover… but they stay permanently large — I would like another touch to shrink them again (only on the phone)
2. 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 these?

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