Sådan opretter man: Billedoverlejring ikon

Previous page Image overlay title
Next page Image effects

Lær, hvordan du opretter et ikonoverlejringseffekt ved musepeksling.

Billedoverlejring ikon

Placer musen over billedet for at se overlejringseffekten.

Sådan opretter du et dækkende ikon

Første trin - Tilføj HTML:

Tilføj ikonbibliotek
<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="Brugerprofil">
      <i class="fa fa-user"></i>
    </a>
  </div>
</div>

Anden trin - Tilføj CSS:

/* Beholderen, hvor overliggende laget skal placeres. Juster bredden efter behov */
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}
/* Gør billedet responsivt */
.image {
  width: 100%;
  height: auto;
}
/* Overlægningseffekt (fuld højde og bredde) - placeret øverst i containeren og over billedet */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}
/* Fader ikonet ind, når musen holdes over containeren */
.container:hover .overlay {
  opacity: 1;
}
/* Centrerer ikonet i overliggende lag både lodret og vandret */
.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
/* Ændre farve, når musen bevæger sig over ikonet */
.fa-user:hover {
  color: #eee;
}

Prøv det selv