Margin error and vertical alignment on psuedo-elements

Question

My HTML code is as follows:

<article>
    <picture>
        <img src="a.png">
    </picture>
</article

This HTML code is all over of the page, where the img has a variable width. The idea is to be able to hover on the img, creating a image hover overlay with a + on it. I tried that with this CSS:

article picture { position: relative; }
article picture:before { background: rgba(0,0,0,.75); content: "+"; height: 100%; opacity: 0; position: absolute; transition: opacity .25s ease; width: 100%; }
article picture:hover:before { opacity: 0.9; }

It works, more or less. My overlay is bigger than my img, always like 10 pixels, how can i fix that? And i want to center that "+" on my img, i cannot get that done. vertical-align: middle does not work, line-height i cannot use, since the img has a variable size. Any ideas?

Answer 1

The problem is that images are managed something like inline block. You just need to use display: block; .

 article picture { display: inline-block; position: relative; } img { display: block; } article picture:before { background: rgba(0, 0, 0, .75); content: "+"; height: 100%; opacity: 0; position: absolute; text-align: center; top: 0; left: 0; transition: opacity .25s ease; width: 100%; } article picture:hover:before { opacity: 0.9; } 

 <article> <picture> <img src="http://www.placehold.it/100x100"> </picture> </article 

EDIT:

Here's another alternative I did for the overlay you want: jsfiddle .