Miten luodaan: kuvan peittävän kerroksen skaalaus

Edellinen sivu Kuvan päällekkäisyys liukus
Seuraava sivu Kuvan päällekkäisyys otsikko

Opit, miten luodaan kuvan peittävän kerroksen skaalausvaikutus hiiren liikkumisen aikana.

Kuvan peittävän kerroksen täysinäinen skaalaus

Vedä hiiri kuvan päälle, niin näet skaalausvaikutuksen.

Hei maailma

Kokeile itse

Miten luodaan peittävän kerroksen skaalausvaikutus

Vaihe 1 - Lisää HTML:ää:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hei maailma</div>
  </div>
</div>

Vaihe 2 - Lisää CSS:ää:

/* Kontti, johon peittävän kerroksen täytyy sijoittua. Määritä leveys tarpeen mukaan */
.container {
  position: relative;
  width: 50%;
}
/* Tehdään kuva responsiiviseksi */
.image {
  width: 100%;
  height: auto;
}
/* Peittävän vaikutus (kokonaiskorkeus ja kokonaisleveys) - sijaitsee kontin ylärannassa ja kuvan yläpuolella */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
/* Kun hiiri viedään konttiin päälle, peittävän tekstin skaalaus näkyy */
.container:hover .overlay {
  transform: scale(1);
}
/* Peittävän kerroksen sisällä oleva teksti, keskitys paikannus sekä pystysuunnassa että vaakasuunnassa */
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Kokeile itse