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.

Avatar
Ang pangalan ko ay Bill

Subukan nang personal

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;
}

Subukan nang personal

Ang mga nauugnay na pahina

Tuturial:CSS 图像

Tuturial:如何创建图像叠加悬停效果