Paano gumawa: Cover Image Icon

Aralan kung paano gumawa ng epekto ng cover image icon sa panahon ng mouse hover.

Cover Image Icon

Ilagay ang mouse sa ibabaw ng imahe, upang makita ang pagkalapit ng epekto.

Avatar

亲自试一试

Paano gumawa ng Cover Image Icon

Unang Hakbang - Dagdagin ang HTML:

Mga Icon Library Dagdagin
<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="User Profile">
      <i class="fa fa-user"></i>
    </a>
  </div>
</div>

第二步 - 添加 CSS：

/* 需要放置覆盖层的容器。根据需要调整宽度 */
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}
/* 使图像可响应 */
.image {
  width: 100%;
  height: auto;
}
/* 叠加效果（全高和全宽）- 位于容器顶部和图像上方 */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: red;
}
/* 当您将鼠标悬停在容器上时，叠加图标会淡入 */
.container:hover .overlay {
  opacity: 1;
}
/* 覆盖层内的图标在垂直和水平方向上均居中定位 */
.icon {
  color: white;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
/* 当鼠标移动到图标上时，改变颜色 */
.fa-user:hover {
  color: #eee;
}

亲自试一试

相关页面

教程：CSS 图像

教程：如何创建图像叠加悬停效果