2

私は自分のポートフォリオに取り組んでおり、画像のサムネイルにいくつかの派手なことをしました. ホバーキャプションがホバー時にフェードイン/フェードアウトするようになりました。

これまでのところ私のコードです。HTML:

<a href="1.jpg" class="mask"><img src="1.jpg" />
        <span class="caption fade-caption">  
        <h3>Fade Caption</h3>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
        </span>  
    </a>

CSS:

    .mask {
    position:relative;
    height:180px;
    width:240px;
    -webkit-box-shadow:0 0 1px #000;
    border:5px solid #f6f6f6;
    overflow:hidden;
    float:left;
    margin:15px;
}
.mask img {
    position:absolute;
    height:300px;
    width:400px;
    -webkit-transform: rotate(15deg);
    -moz-transform:rotate(15deg);
    -o-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
    transform:rotate(15deg);
    top:50%;
    left:50%;
    margin-top:-150px; /* half the height */
    margin-left:-200px; /*half the width */
}

.mask:last-child {
    margin-right:0px;
}

.mask .caption {  
    background-color: rgba(222,169,188,0.9);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    left: 0;  
}  

.mask .fade-caption {  
    opacity: 0;  
    width: 220px;  
    height: 180px;  
    text-align: left;  
    padding: 4px 20px 4px 15px; 
    display:none; 
    font-size:0.8em;
}  

.mask:hover .fade-caption {  
    opacity: 1;  
    display:inline;
      width: 220px;  
        height: 180px;
-webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;   
    }

フェード キャプション クラスを追加し、遷移を :hover 状態にする必要があると考えましたが、明らかにそうではありません。私はまだトランジションにそれほど熟練していません.私の問題を解決するのに役立つチュートリアルが見つからなかったので、誰かが私を助けてくれることを願っています.

4

2 に答える 2

2

あなたはかなり近かった。実際の例については、このフィドルを確認してください。以下の完全な CSS:

.mask {
    position:relative;
    height:180px;
    width:240px;
    box-shadow:0 0 1px #000;
    border:5px solid #f6f6f6;
    overflow:hidden;
    float:left;
    margin:15px;
}
.mask img {
    position:absolute;
    height:300px;
    width:400px;
    top:50%;
    left:50%;
    margin-top:-150px; /* half the height */
    margin-left:-200px; /*half the width */
    -webkit-transform: rotate(15deg);
    -moz-transform:rotate(15deg);
    -o-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
    transform:rotate(15deg);
}

.caption {  
    background-color: rgba(222,169,188,0.9);  
    position: absolute;  
    color: #fff;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; 
    padding: 4px 20px 4px 15px; 
    font-size:0.8em;
    opacity: 0;
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;   
}  

.mask:hover .caption {  
    opacity: 1;  
}

重要なのは、transitionスタイリングは要素の状態だけでなく、要素自体にあること:hoverです。そうすれば、フェードインとフェードアウトの両方が行われます。これらのスタイルがオン:hoverの場合、要素はフェードインしますが、フェードアウトするのではなくすぐに消えます。

display: noneと の間で遷移することはできませんdisplay: block/whatever。opacityしたがって、このインスタンスでは、キャプションを視覚的に隠すものにする必要があります。独自の ms-filters を追加して、古い IE サポートを取得できます。

その他の注意事項:

  1. 簡単にするために、クラス.captionとクラスを統合しました。.fade-caption
  2. 状態に既に設定されているものを再宣言する必要はありません:hover。変更する必要があるものを記述するだけで済みます。
  3. プレフィックスはもう必要ありませんbox-shadow。最終バージョンを使用してください。
  4. キャプションの配置、作成だけでなく、とabsoluteの設定にも少し混乱していました。簡単にするために、4 つの値すべてを に設定しました。widthheight0
  5. hereを宣言する必要はありませんz-index。ブラウザの通常のスタック順で並べ替えるだけです。ただし、マークアップで画像の前にキャプションを配置する必要がある場合は、これを追加し直す必要があります。
于 2013-04-12T10:28:54.347 に答える
1

トランジションが期待どおりに動作していない理由は、キャプションのdisplayプロパティ (からnoneへ) がトランジションを妨げているためです。また、変更を行う前に (つまり、前に) トランジションを要素に適用する必要があります。ホバー - 通常の状態)。キャプションのフェード インとフェード アウトを純粋に に依存すると、うまくいくはずです。inlineopacityopacity

.mask .fade-caption {  
    opacity: 0;  
    width: 220px;  
    height: 180px;  
    text-align: left;  
    padding: 4px 20px 4px 15px; 
    font-size:0.8em;
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  

.mask:hover .fade-caption {  
    opacity: 1;  
    width: 220px;  
    height: 180px;
}

http://jsfiddle.net/g9NFV/

編集：忍者ですが、とりあえずこの回答をここに残しておきます。

于 2013-04-12T10:31:19.440 に答える