如何创建：图像覆盖图标

学习如何在鼠标悬停时创建图像覆盖图标效果。

如何创建覆盖图像图标

第一步 - 添加 HTML：

<!-- 添加图标库 -->
<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="Profil Pengguna">
      <i class="fa fa-user"></i>
    </a>
  </div>
</div>

Langkah kedua - Tambahkan CSS:

/* Kontainer yang perlu menempatkan lapisan. Sesuaikan lebar menurut kebutuhan */
.container {
  position: relatif;
  lebar: 100%;
  lebar maksimum: 400px;
}
/* Membuat gambar responsif */
.image {
  lebar: 100%;
  tinggi: otomatis;
}
/* Efect superlapis (penuh tinggi dan lebar) - berada di atas kontainer dan di atas gambar */
.overlay {
  position: absolut;
  atas: 0;
  bawah: 0;
  kiri: 0;
  kanan: 0;
  tinggi: 100%;
  lebar: 100%;
  kecerahan: 0;
  transisi: .3s lancar;
  warna latar belakang: merah;
}
/* Ikon yang di superlapis akan masuk ke halus saat kursor disorot di atas kontainer */
.container:hover .overlay {
  kecerahan: 1;
}
/* Penampang ikon di dalam lapisan menempatkan di tengah secara vertikal dan horizontal */
.icon {
  warna: putih;
  ukuran tulisan: 100px;
  position: absolut;
  tinggi: 50%;
  kiri: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: tengah;
}
/* Berubah warna saat kursor bergerak ke ikon */
.fa-user:hover {
  warna: #eee;
}

Coba sendiri

Halaman yang berhubungan

Tutorial:CSS 图像

Tutorial:Bagaimana untuk membuat efek layar superlapis kena angkat