如何使用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>
可以通過以下方式實現此效果CSS 代碼:
<code class="html"><div class="image-container"> <img src="http://lorempixel.com/300/200" /> <div class="after">This is some content</div> </div></code>
HTML:
其他樣式:<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>
為了更美觀的外觀,請考慮加入以下CSS:
示範:示範:] 在此處查看示範:http://jsfiddle.net/6Mt3Q/以上是如何使用 CSS 創建適用於不同高度圖像的圖像疊加?的詳細內容。更多資訊請關注PHP中文網其他相關文章!