Kuinka luoda: kuvapeittävät kuvakuvakset

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

Opeta, kuinka luoda kuvapeittävät kuvakuvakset hiiren osoitin päällä.

Kuvapeittävät kuvakuvakset

Näytä hiiren osoitin kuvalla, niin näet ylpeä vaikutus.

Kuinka luoda peittävät kuvakuvakset

Vaihe 1 - Lisää HTML:

Lisää ikonikirjasto
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <a href="#" class="icon" title="Käyttäjäprofiili">
      <i class="fa fa-user"></i>
    </a>
  </div>
</div>

Toinen vaihe - lisää CSS:

/* Konteineri, johon peittävä kerros asetetaan. Muuta leveyttä tarpeen mukaan */
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}
/* Tehdään kuva vastaanottavaksi */
.image {
  width: 100%;
  height: auto;
}
/* Peittävä vaikutus (täyskorkeus ja täysleveys) - sijaitsee konteinerin ja kuvan yllä */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}
/* Kuvake peittyy pehmeästi, kun hiiren osoitin siirtyy konteineriin */
.container:hover .overlay {
  opacity: 1;
}
/* Peittävän kerroksen sisällä oleva kuvake keskittyy sekä pystysuunnassa että vaakasuunnassa */
.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
/* Muuta väriä, kun hiiren osoitin siirtyy kuvakkeeseen */
.fa-user:hover {
  color: #eee;
}

Kokeile itse