ホームページ > 記事 > ウェブフロントエンド > さまざまな高さの画像に対応する CSS を使用した画像オーバーレイを作成するにはどうすればよいですか?
CSS で画像オーバーレイを作成する方法
問題:
画像の上にカーソルを置くと、その上にテキストとアイコンを含む暗いオーバーレイが配置されます。ただし、画像の高さが異なり、以前のチュートリアルが成功していないため、困難に直面しています。
解決策:
この効果は、次のコマンドで実現できます。 CSS コード:
<code class="css">.image-container { position: relative; width: 200px; height: 300px; } .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); }</code>
HTML:
<code class="html"><div class="image-container"> <img src="http://lorempixel.com/300/200" /> <div class="after">This is some content</div> </div></code>
追加のスタイル:
より洗練された外観を実現するには、次の CSS を追加することを検討してください:
<code class="css">.image-container .after .content { position: absolute; bottom: 0; font-family: Arial; text-align: center; width: 100%; box-sizing: border-box; padding: 5px; } .image-container .after .zoom { color: #DDD; font-size: 48px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -19px; height: 50px; width: 45px; cursor: pointer; } .image-container .after .zoom:hover { color: #FFF; }</code>
デモ:
ここでデモを参照してください: http://jsfiddle.net/6Mt3Q/
以上がさまざまな高さの画像に対応する CSS を使用した画像オーバーレイを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。