ポートフォリオ ナビゲーションにホバー状態を適用しようとしています。これは、画像の上に水平方向および垂直方向に中央揃えされたヘッダーです。センタリングは必要に応じて機能します (これほど複雑になるのには理由があります。または、別の方法で行うと思います)。
しかし、ホバー状態が問題を引き起こしています。私はこのようなことをしようとしています: http://jsfiddle.net/kmjRu/33/。h2
これは、画像のホバー時の とその背景の遷移です。の不透明度または z-index をいじることでほとんど機能しますがh2
、特に背景色の変更は機能しません (背景を変更できる画像を正確にカバーする要素がないため)。ホバー状態を適切に機能させる方法を知っている人はいますか?
これは私が持っているコードで、このホバー効果を機能させようとしています:
(ここにも投稿されています: http://jsfiddle.net/kmjRu/34/ )
HTML
<article>
<div class="img-crop">
<h2>Title</h2>
<a href="#"><img src="http://bit.ly/gUKbAE" /></a>
</div>
</article>
CSS
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
article {
overflow: hidden;
}
.img-crop {
display: inline-block;
position: relative;
overflow: hidden;
max-width: 100%;
}
h2 {
margin: 0;
padding: 0;
z-index: 1;
line-height: 0;
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
}