Why does this background extend beyond the image upon hover?

Question!

I'm trying to create a hover effect on a rather complex layout. The hover effect works, but upon hover the background (or overlay) extends beyond the image (I would like it to be just as big as the image).

Does anyone know why that is and how to fix it?

HTML

<article>
    <div class="img-crop">
        <a href="#" class="title-anchor"><h2>Title</h2></a>
        <a href="#"><img src="http://bit.ly/gUKbAE" /></a>
    </div>
</article>

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

article {
    overflow: hidden;
}

.title-anchor {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.img-crop:hover .title-anchor {
    background: rgba(0,0,0,0.5);
}

.img-crop {
    display: inline-block;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

h2 {
    color: rgba(0,0,0,0);
    margin: 0;
    padding: 0;
    z-index: 2;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
}

.img-crop:hover h2 {
    color: black;
}

It's here too: http://jsfiddle.net/kmjRu/39/



Answers

define the height of .img-crop:hover the same as .img-crop img. E.g.

.img-crop:hover {
    background: rgba(0,0,0,0.5);
    height: 100px;
}
.img-crop img{height: 100px;}


This video can help you solving your question :)
By: admin