css3 ショッピング Web サイトの商品テキスト プロンプト example_html/css_WEB-ITnose

Css3 ショッピング Web サイトの商品テキスト プロンプトの例
まずレンダリングを見てみましょう:

マウスを画像上に移動すると、テディベアが描かれた黒い長方形の背景が表示されます。
HTML5+CSS3 コードを見てください:

>
# con{ width:500px;height:470px;margin:50px auto;position:relative;}
#con p{background:#000;color:#fff;width:100%;height:30px;text-align:center ;line -height:30px;position:absolute;left:0;bottom:0;opacity:0.6;height:0;-webkit-transition:height 0.5s;}
6. title="商品画像" >
コードをコピーします
コードの説明:
9. div を構築し、表示する必要がある商品画像を div に保存し、商品画像のテキスト説明を追加します。
css スタイル属性を div に追加します。また、 css スタイル属性を p 要素に追加し、高さを 0 、Invisible に設定します。重要な点は、絶対位置と相対位置の使用です。まだ理解していない場合は、この投稿を読んでください。http://www.00h5.com/thread-133-1-1.html
10. その後にトランジション アニメーションを追加します。説明テキストを配置します。ここでは、マウスが div 上に移動したときに p の高さのみを元の 30px に変更します。アニメーションでは高さ属性も設定します