Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mencipta Tindanan Imej dengan CSS yang Berfungsi pada Imej Ketinggian Berbeza-beza?
Cara Membuat Tindanan Imej dengan CSS
Masalahnya:
Anda mahu letakkan tindanan gelap dengan teks dan ikon pada imej apabila anda menuding di atasnya. Walau bagaimanapun, anda menghadapi kesukaran kerana ketinggian imej berbeza-beza dan tutorial sebelumnya tidak berjaya.
Penyelesaian:
Kesan ini boleh dicapai dengan perkara berikut Kod 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>
Penggayaan Tambahan:
Untuk rupa yang lebih gilap, pertimbangkan untuk menambah CSS berikut:
<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>
Demo:
Lihat demo di sini: http://jsfiddle.net/6Mt3Q/
Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tindanan Imej dengan CSS yang Berfungsi pada Imej Ketinggian Berbeza-beza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!