悬停效果“更改您的图片”与个人资料图片上的图标答案

【问题标题】：Hover Effect "change your picture" with icon on profile picture悬停效果“更改您的图片”与个人资料图片上的图标
【发布时间】：2021-07-10 06:22:13
【问题描述】：

我想在我的图像上获得悬停效果，当用户越过图像时，图像上应该会出现带有一些文本的背景（参见下面的示例）。不幸的是，我的 CSS 看起来一点也不像。它不在中间，图像也不圆，更像一个鸡蛋。

我现在的问题是，我怎样才能使用 CSS 来制作图像，使其呈圆形，并且当翻阅它时，文本可以很好地显示在中间。

我还使用 Bootstrap 作为附加库，如果它应该更容易的话。

我有什么：

我想要什么：

Pic.js

<div class="container-profilepic">
     <img src="./image.png" width="150" height="150" alt="Profibild" className="photo-preview"></img>
     <div class="middle-profilepic">
            <div class="text-profilepic"><i class="fas fa-camera"></i>
            <div class="text-profilepic">Change it
     </div>
</div>

Photo.css

    .photo-preview{
    width: 100% !important;
    max-width: 125px !important;
    height: 100% !important;
    max-height: 125px!important;
    border-radius: 50% !important;
  }

  .middle-profilepic {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    text-align: center;
  }
  
  .container-profilepic:hover .photo-preview {
    opacity: 0.3;
  }
  
  .container-profilepic:hover .middle-profilepic {
    opacity: 1;
  }
  
  .text-profilepic {
    color: green;
    font-size: 16px;
  }

我检查了这个问题之前How do I add animated text on these images when I hover my cursor without changing current style? 不幸的是，它对我没有帮助。

我之前用top、left、postion...

  .middle-profilepic {
    transition: .5s ease;
    opacity: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

结果

所以我删除了它，因为结果更接近我想要的结果

【问题讨论】：

这能回答你的问题吗？ How do I add animated text on these images when I hover my cursor without changing current style?

标签： html css styles

【解决方案1】：

.image {
position: relative:
}
.text-div {
position: abolute;
top: 10px;
left:40%;
}

还有img标签它是自闭标签

【讨论】：

【解决方案2】：

解决方案

创建具有relative 位置并固定height 和width 的容器
根据容器大小添加图像作为背景图像
使用position: absolute 添加内容

使用 bootstrap-5 的解决方案

        .container-profilepic {
            width: 150px;
            height: 150px;
        }
        .photo-preview {
            background-image: url( https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80 );
            background-size: cover;
            background-position: center;
        }
        .middle-profilepic {
            background-color: rgba( 255,255,255, 0.69 );
        }
        .container-profilepic:hover .middle-profilepic {
            display: flex!important;
            cursor: pointer;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous">
</head>
<body>
    <div class="container-profilepic card rounded-circle overflow-hidden">
        <div class="photo-preview card-img w-100 h-100"></div>
        <div class="middle-profilepic text-center card-img-overlay d-none flex-column justify-content-center">
            <div class="text-profilepic text-success">
                <i class="fas fa-camera"></i>
                <div class="text-profilepic">Change it</div>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

解决方案

您需要将父div 与position: relative 和内部内容（图标+图像）设置为position: absolute 元素，拉伸以适应。

如果您需要头像图像来添加img 标签，您可以在 CSS 中使用object-fit: cover（现在已广泛支持：https://caniuse.com/?search=object-fit）。

提示

请注意您发布的 HTML 无效，有一些损坏的标签
我强烈建议您不要在 CSS 中大量使用 !important

工作示例

body {
  font-family: sans-serif;
}

.profilepic {
  position: relative;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #111;
}

.profilepic:hover .profilepic__content {
  opacity: 1;
}

.profilepic:hover .profilepic__image {
  opacity: .5;
}

.profilepic__image {
  object-fit: cover;
  opacity: 1;
  transition: opacity .2s ease-in-out;
}

.profilepic__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.profilepic__icon {
  color: white;
  padding-bottom: 8px;
}

.fas {
  font-size: 20px;
}

.profilepic__text {
  text-transform: uppercase;
  font-size: 12px;
  width: 50%;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet" />


<div class="profilepic">
  <img class="profilepic__image" src="https://images.unsplash.com/photo-1510227272981-87123e259b17?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=3759e09a5b9fbe53088b23c615b6312e" width="150" height="150" alt="Profibild" />
  <div class="profilepic__content">
    <span class="profilepic__icon"><i class="fas fa-camera"></i></span>
    <span class="profilepic__text">Edit Profile</span>
  </div>
</div>

【讨论】：