Ширина текста CSS над изображением

Я пытаюсь настроить ширину текста так же, как ширина изображения. Это часть моего кода:

<style>
   .sign {
   position: relative;
   float: left;
   }
   .sign figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 3px;
    display: none;
   }
</style>

<script>
$(document).ready(function() {
   $(".sign").mouseenter(function(){
        $("figcaption").slideToggle();
   });
   $(".sign").mouseleave(function(){
        $("figcaption").slideToggle();
   });
});
</script>

<div class="sign">
   <img src="<c:url value="resources/img/girl.jpeg"/>">
   <figcaption>change picture</figcaption>
</div>

когда я устанавливаю ширину 100%, у меня есть ширина области текста больше

Я новичок в css, помогите решить проблему.