css text width over image

Question

I try to adjust text width same as image width. This is part of my code:

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

when I set width 100% I have text area width more

---

I'm new to css, please help to solve it.

Answer 1

This has to do with the left and right padding that you've placed on the caption. The resulting width is the value of the width + the padding. I'd recommend reading about the box model: http://www.w3.org/TR/CSS21/box.html

In an effort to be a bit more helpful: because the text is centered, just remove the padding on the left and right.

.sign figcaption{
    padding: 3px 0px;
}

JSFiddle: http://jsfiddle.net/LsQ2d/