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/

I don't think it's any margins or padding, since I've already disabled those and the effect was still there. — , Apr 09 '13 at 15:40
Didn't you already ask this over at http://stackoverflow.com/questions/15904693 — xec, Apr 09 '13 at 15:42
possible duplicate of [Transition on position:absolute header and background](http://stackoverflow.com/questions/15904693/transition-on-positionabsolute-header-and-background) — BenM, Apr 09 '13 at 15:43
@xec, I solved my previous question, but couldn't figure this bit out. It's a different problem in my opinion, though somewhat part of the previous one. You can delete my previous question if you want. — , Apr 09 '13 at 15:45

score 3 · Answer 1 · edited May 23 '17 at 10:27

3

Just add

img {
display: block;
}

http://jsfiddle.net/kmjRu/41/

Images are replaced inline elements by default

edited May 23 '17 at 10:27

Community

1
1

answered Apr 09 '13 at 15:43

Adrift

58,167
12
92
90

score 2 · Accepted Answer · answered Apr 09 '13 at 15:45

2

You need to add this on the universal css:

img { border: 0; vertical-align: top;}

...

http://jsfiddle.net/Riskbreaker/kmjRu/43/

answered Apr 09 '13 at 15:45

Riskbreaker

4,621
1
23
31

Images will be vertical aligned with the baseline of text, which causes spacing at the bottom – Riskbreaker Apr 09 '13 at 15:58
NP! This has become a html5 boilerplate standard (vertical-align): https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css – Riskbreaker Apr 09 '13 at 16:02
I think I prefer your answer because it doesn't require me to mess with the display mode. Close call though, both work. – Apr 09 '13 at 16:10

score 0 · Answer 3 · answered Apr 09 '13 at 15:45

0

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

answered Apr 09 '13 at 15:45

Nik Drosakis

2,258
21
30

Why does this background extend beyond the image upon hover?

3 Answers3