悬停时覆盖文字

Question

我想要的：当圆形图像悬停时，灰色叠加层应该用中心的超链接文本 "Edit" 覆盖图像。

.edit {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 150px;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.6);
    a {
      display: inline-block;
    }
}

.profile-userpic {
  position: relative;
  display: block;
  a img {
    float: none;
    margin: 0 auto;
    width: 100%;
    width: 150px;
    height: 100%;
    height: 150px;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
  }
  &:hover .edit {
    display: block;
  }
}

<div class="profile-userpic">
   <a href=""><img src=" http://placehold.it/150x150" class="img-responsive" alt="" title=""></a>
   <div class="edit"> <a href="">Edit</a></div>
</div>

Answer 1

您的代码正在运行（当然是在编译后）。

编辑：如果您希望您的 .profile-userpic 是独立的并且能够将其放置在您想要的任何位置（例如在您的屏幕截图中），您必须稍微更改您的代码。不要在子元素（img 和您的编辑 div）上设置高度和宽度，而是在父容器上设置它。

.edit {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    line-height: 150px;
    text-align: center;
    background: rgba(0,0,0,0.6);
}
.edit a {
  color: white;
}

.profile-userpic {
  position: relative;
  height: 150px;
  width: 150px;
  margin: 20px auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}
.profile-userpic a img {
  width: 100%;
  height: 100%;
}
.profile-userpic:hover .edit {
  display: block;
}

<div class="profile-userpic">
   <a href=""><img src=" http://placehold.it/150x150" class="img-responsive" alt="" title=""></a>
   <div class="edit"> <a href="">Edit</a></div>
</div>

作为奖励，这里有一个 fiddle 在 css 中具有很好的 fadeIn/fadeOut 效果：https://jsfiddle.net/u999xc85/1/

Answer 2

试试这个现在具有过渡和不透明效果。

    .edit {
        opacity:0;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        line-height: 150px;
        text-align: center;
        background: rgba(0,0,0,0.6);
      transition:all 600ms linear 0s;
      border-radius:50%;
    }
    .edit a {
      color: white;
      transition:all 600ms linear 0s;
    }

    .profile-userpic {
      position: relative;
      height: 150px;
      width: 150px;
      margin: 20px auto;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      overflow: hidden;
      transition:all 600ms linear 0s;
    }
    .profile-userpic a img {
      width: 100%;
      height: 100%;
      transition:all 600ms linear 0s;
    }
    .profile-userpic:hover .edit {
      opacity:1;
      transition:all 600ms linear 0s;
    }

    <div class="profile-userpic">
       <a href=""><img src=" http://placehold.it/150x150" class="img-responsive" alt="" title=""></a>
       <div class="edit"> <a href="">Edit</a></div>
    </div>

悬停时覆盖文字

Overlay text on hover

html

css

overlay

mousehover