Увеличение изображения при наведении ⇐ CSS

[Гость]

У меня есть следующий рисунок с подписью в HTML:

Код: Выделить всё

[img]images/{{image.link}}[/img]
{{image.caption}}

Приведенный ниже код CSS выполняет, среди прочего, следующее:

• Убедитесь, что рисунок и изображение соответствуют ширине и поплавок вправо
• Создайте черную рамку толщиной 1 пиксель вокруг изображения и подписи.
• При наведении курсора мыши увеличьте всю конструкцию «figure-img-caption». .

У меня есть две проблемы, которые я не могу решить:

• На моем телефоне (Safari на iOS) цифры увеличиваются в размерах при нажатии. Мне это нравится, так как при наведении нет... но они постоянно остаются большими - мне бы хотелось, чтобы еще одно прикосновение уменьшило их (только на телефоне).
• Масштабирование также увеличивает Черная рамка толщиной 1 пиксель, которая становится довольно некрасивой. Я не знаю, как увеличить число, img, figcaption, не увеличивая заданную им границу.

Как мне это сделать?< /p>

Код: Выделить всё

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

Код: Выделить всё

[img]https://picsum.photos/600/300[/img]
Lorem Ipsum

Подробнее здесь: https://stackoverflow.com/questions/784 ... e-on-hover