1

ポートフォリオ ナビゲーションにホバー状態を適用しようとしています。これは、画像の上に水平方向および垂直方向に中央揃えされたヘッダーです。センタリングは必要に応じて機能します (これほど複雑になるのには理由があります。または、別の方法で行うと思います)。

しかし、ホバー状態が問題を引き起こしています。私はこのようなことをしようとしています: 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;
}
4

3 に答える 3

0

基本的には、次のことを確認する必要があります。

  1. あなたの h2 は背後のコンテナと正確に等しくなければなりません。そうして初めて、完全なオーバーレイが実行されます。
  2. のデフォルトopacityh20 に設定し、それを 0.6 などの中間値に変更/移行しますhover
  3. また、 background-colorh2 の を黒にするか、親コンテナーとは異なるものにする必要があります。そうしないと表示されません。
  4. 次に、h2 要素に適切なパディングを与えて、テキストが中央に表示されるようにします。

次のように設定h2します。

h2 {
    margin: 0;
    z-index: 1;
    padding-top:20%;
    line-height: 0;
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    text-align: center;
    vertical-align:middle;
    height:100%;

    opacity:0;
}

h2:hover次のように設定します。

h2:hover
{
    padding-top:20%;
    color:white;
    background-color:Black;
    opacity:0.6;
    -webkit-transition: opacity 0.25s, background-color 0.25s;
    -o-transition: opacity 0.25s, background-color 0.25s;
    -moz-transition: opacity 0.25s, background-color 0.25s;
    -ms-transition: opacity 0.25s, background-color 0.25s;
    -kthtml-transition: opacity 0.25s, background-color 0.25s;
    transition: opacity 0.25s, background-color 0.25s;
}

このフィドルを参照してください

于 2013-04-09T14:43:52.773 に答える
0

だから、私は次のようにして質問を解決しました:

HTML

<article>
    <div class="item">
        <a href="#" class="title"><h2>Title</h2></a>
        <img src="http://placehold.it/350x150" />
    </div>
</article>

CSS

article {
    overflow: hidden;
}

h2 {
    font-weight: normal;
    z-index: 2;
    line-height: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    left: 0;
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,0);
    -webkit-transition: color 0.2s linear;  
    -moz-transition: color 0.2s linear;  
    -o-transition: color 0.2s linear;  
    transition: color 0.2s linear; 
}

.title {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    text-decoration: none;
    -webkit-transition: background-color 0.2s linear;  
    -moz-transition: background-color 0.2s linear;  
    -o-transition: background-color 0.2s linear;  
    transition: background-color 0.2s linear; 
}

.title:hover {
    text-decoration: none;
}

.item {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.item:hover .title {
    background: rgba(0,0,0,0.6);
}

.item:hover h2 {
    color: rgba(255,255,255,1);
}

img {
    border: 0;
    vertical-align: top;
    max-width: 100%;
}

このフィドルを参照してください。このように動的 (画像は流動的で、固定された高さや幅はありません) であり、見出しは自動的に垂直方向および水平方向の中央に配置されます。

于 2013-04-26T14:29:11.840 に答える