CSS psuedo：要素ホバー効果が正しく機能していません

Question

psudeo:elementがホバーされているときにCSSをease-in-outに入力しています。

以下のコードは、私がホバーに表示したい要素の.descriptionの親を選択していますが、ホバー効果は私が望む前に起こっています。

.grid-item:hover .description { 
    visibility: visible; 
    opacity: 1; 
    } 

カーソルが親要素の数センチメートル上にある場合、ホバー状態がトリガーされます。私はこれがこの要素のパディング/マージンに問題があると信じています。私は運がないと多くのことを試しました。

ここにはfull codeがあります。

問題を理解するために、各画像の上に軽くマウスを置いてください。

Answer 1

ホバー上のテキストを表示するCSSセレクタを変更するだけで済みます。現時点では、.imageの親（すなわち、.grid-item）が居るときにトリガーされます。代わりに、次のように設定すると、イメージを含むdivが表示されたときにトリガーされます。 https://codepen.io/anon/pen/WEWmEw?editors=1100

Answer 2

@Jordanミゲルは、あなたは正しい：

.image:hover + .description { 
    visibility: visible; 
    opacity: 1; 
} 

はここで更新されたペンです。それは、コンテンツそのものと同様に、パディングです。

あなたはあなたの選択のブラウザのための開発ツールを開く割れた場合は（私は絵でChromeのを使用しています）、あなたはおそらく、特定のCSS要素のボックスモデルを表示するためのツールを見つけることができます。要素を選択すると、右端と左端に埋め込みが表示され、hoverがトリガーされます。

ツールの左側のペインに、選択した要素と適用されているスタイリングが表示されます。ここから、期待する動作を得るために変更する必要があるものを見つけ出すことができます。