Hur skapa: Bildöverlågande ikon

Föregående sida Titel för bildöverlappning
Nästa sida Bildeffekter

Lär dig hur man skapar ett överlågande ikonbildeffekt när muspekaren hängar.

Bildöverlågande ikon

Håll muspekaren över bilden för att se effekten.

Hur skapa ett överlågande ikonbild

Steg 1 - Lägg till HTML:

Lägg till 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="Användarprofil">
      <i class="fa fa-user"></i>
    </a>
  </div>
</div>

Steg 2 - Lägg till CSS:

/* Behållaren där täcklagen behöver placeras. Justera bredden efter behov */
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}
/* Gör bilden responsiv */
.image {
  width: 100%;
  height: auto;
}
/* Effekt som täcker hela höjden och bredden - placerad över behållaren och bilden */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}
/* Lägg ikonen i fokus när musen hålls över behållaren */
.container:hover .overlay {
  opacity: 1;
}
/* Centrerar ikonen horisontellt och vertikalt inom täcklagen */
.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
/* Ändra färg när musen rör sig över ikonen */
.fa-user:hover {
  color: #eee;
}

Prova själv