0

ホバーするとテキストがフェードアウトする画像を含むサイトを設計しています。

以下のスレッドを使用してこれを行いましたが、すべてうまくいきましたが、追加しているテキストが画像の幅と高さいっぱいになると、それはオーバーします。CSS を使用してテキストにパディングを追加しようとしましたが、うまくいきません。

ホバー時に画像の上にテキストがある DIV

これが私の修正されたコードです。

CSS

    p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}


   div.containerdiv{position:relative}

div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}

div.texts:hover{display:block}

html

    <div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
    <img src="images/cncpt.jpg" alt="background">
    <div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
  <!-- end .grid_8 -->

まだ喜びはありません！画像は正常に表示されていますが、その上またはページのどこにもテキストが表示されていません。

これを解決する方法についてのアイデアは大歓迎です。

ありがとう、ジョン

4

1 に答える 1

0

CSS を使用した簡単な答えは、アンカー タグで :hover 疑似クラスを使用することです。

CSS で画像コンテナを position:relative として設定します。

画像コンテナー内に html と CSS を使用してフォーマットされたテキストを含む div を作成します。この絶対位置を CSS に配置します。絶対配置では、相対配置された親コンテナーを基準にして要素を配置します。要素が相対位置に設定されていない場合、その位置は body タグから取得されます。要素に幅を設定することも重要です。

HTML

<div class="container">
    <a><img src="img.jpg" alt="background">
       <div class="text">I will show on hover</div>
    </a>
</div>

CSS

div.container{position:relative;}

div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}

a:hover div.text{display:block;}

これにより、設定したコンテナの上にテキストが配置され、左上隅に相対的に配置されます。z-index は要素を上下に積み重ねます。z-index が高いほど、スタック内の要素が高くなります。

w3 スクールには、上記のすべてのコードに関する優れた定義と例がいくつかあります。

あなたが求めている効果は、html と css だけで実現できます。以下に焦点を当てることをお勧めします。

  1. 紙の上にサイトをデザインする
  2. html と CSS を使用してページをレイアウトする
  3. ロールオーバー効果と jQuery アニメーションを追加する

jQueryアニメーションを追加する前に

CSS3 トランジションはすべてのブラウザーと互換性があるわけではありません。CSS には回避策がありますが、jQuery フォールバックがよく使用されます。

于 2013-08-06T21:38:05.980 に答える