Paano gumawa: Overlay titulo ng imahe
Aralan kung paano gumawa ng overlay titulo ng imahe kapag may mouse hover.
Overlay titulo ng imahe
Ipatuloy ang pagpapatuloy ng mouse sa imahe, upang makita ang epekto ng overlay.

Paano gumawa ng overlay titulo ng imahe
Unang hakbang - Magdagdag ng HTML:
<div class="container"> <img src="img_avatar.png" alt="Avatar" class="image"> <div class="overlay">Ang pangalan ko ay John</div> </div>
Ikalawang hakbang - Magdagdag ng CSS:
* {box-sizing: border-box} /* Container na kailangan upang ilagay ang overlay. Ayusin ang lapad ayon sa pangangailangan */ .container { position: relative; width: 50%; max-width: 300px; } /* Gawing responsibo ang imahe */ .image { display: block; width: 100%; height: auto; } /* Epekto ng overlay - nasa itaas ng container at sa itaas ng imahe */ .overlay { position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); /* Makitang puti na kulay kulay itim */ color: #f1f1f1; width: 100%; transition: .5s ease; opacity:0; color: white; font-size: 20px; padding: 20px; text-align: center; } /* Kapag nagpapatuloy ka ng mouse sa loob ng container, lumilipas ang napakalambot na overlay titulo */ .container:hover .overlay { opacity: 1; }
Ang mga nauugnay na pahina
Tuturial:CSS 图像
Tuturial:如何创建图像叠加悬停效果