0

私はこれを達成しようとしています：

転がる

STEPロゴはサムネイルであり、その横にあるRVロゴは、ホバーされていることを除いて同じです。この時点で、VIEWPROJECTと青いシースルーの背景が表示されます。

私はいくつかのことを試しました：

imgをタグの背景にし、タグをタグ<a>に配置し、を使用してから次のように変更します。<p><a>display: none;:hoverdisplay: block;

このレイアウトは応答性が高いため、問題が発生しました。私のコードは次のようになりました。

HTML：

<a class="work-thumb" href="#"><p class="work-thumb-rollover">view project</p></a>

CSS：

a.work-thumb {
    width: 20%;
    padding-top: 50%;
    background-image: url(images/work1.jpg);
    background-size: cover;
    -moz-background-size: cover;  /* Firefox 3.6 */
    background-position: center;
}
    /* This code works, the image as the background is responsive */

p.work-thumb-rollover {
    display: none;
}

p.work-thumb-rollover:hover {
    display: block;
    text-align: centre;
    width: 100%;
    background: rgba(54, 25, 25, .5);
}

    /* This doesn't seem to work, the width 100% doesn't take the width of it's parent and on rollover no color appears? */

また、HTMLと絶対位置でimgタグを使用してみました。

HTML：

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover">view project</p></a>

CSS：

.work-thumb {
    position: relative;
}

.work-thumb img {
    width: 33%;
    height: auto;
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    z-index: 1;
}

p.work-thumb-rollover {
    display: none;
}

p.work-thumb-rollover:hover {
    position: absolute;
    display: block;
    text-align: centre;
    width: 100%;
    background: rgba(54, 25, 25, .5);
    top: 50%;
    left: 50%;        
}

これは、Pタグの幅が親の幅をとらず、ボックスの右上に固定されます（指定した属性に関係なくtop）left。

私はこれに似たものを試しました、私はそれらを削除して正方形に戻しました（その瞬間の応答性を除いてCSSなしでhtmlに画像を持っているだけです）が、これらのバリエーションを試しましたが、それらを取得できませんでした働くために。

誰かがこれに光を当てることができますか、または彼らがすでに使用または見たかもしれない簡単な解決策を提供できますか？

4

3 に答える 3

1

CSS/3 と HTML だけでこれを行うことができます:

これは私があなたのために作った例です

を交換する必要があります

 background-color

と

 background-image

あなたが求めている結果を得るために。

編集:更新された JSFiddle リンクはこちら >>

于 2013-02-26T17:53:22.520 に答える
0

アンカー タグを特定の幅と高さの div に変換し、: hoverで背景画像を変更できます。div のスタイルを設定する必要があります

表示:インラインブロック

于 2013-02-26T17:56:00.053 に答える
0

私があなたの質問を正しく理解している場合は、テキストを表示し、ホバー時に背景画像を変更してください。ちょっとしたjqueryを使ってそれを成し遂げてみませんか：

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover"></p></a>

$('.work-thumb').hover( function() {

$('.work-thumb-rollover').text('view project');
$('.work-thumb > img').attr('src', 'images/work2.jpg');

});
于 2013-02-26T18:02:38.270 に答える