マージン誤差と垂直配向は

Question

私のHTMLコードは、次のとおり

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

このHTMLコードは、すべてのIMGは、可変幅を有するページの上にあります。アイデアは、img上にマウスを置くことができるようにすることで、イメージホバーオーバーレイに+を付けてオーバーレイを作成します。私はこの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; } 

多かれ少なかれ動作します。私のオーバーレイは私のimgより大きく、常に10ピクセルのように、どうすれば修正できますか？そして、私はそれを "+"私のimgに集中させたい、私はそれを行うことができません。 vertical-align: middleは動作しません。line-height imgのサイズが可変なので、私は使用できません。何か案は？

Answer 1

問題は、画像がインラインブロックのように管理されていることです。 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：jsfiddle：

ここで私はあなたがしたいオーバーレイのためにした別の代替です。