Question

我想要的是：当圆形图像悬停时，灰色覆盖图应覆盖带有超链接文本的图像＆＃34;编辑＆＃34;在它的中心。

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

您的代码正在运行（当然，一旦编译完毕）。

修改：如果你希望你的.profile-userpic是独立的并且能够将它放在你想要的任何地方（比如你的截图），你必须稍微改变你的代码。不要在子元素（img和编辑div）上设置高度和设置，而是在父容器上设置它。

＆＃13;
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

在奖金方面，这里有一个fss中的fadeIn / fadeOut效果很好：https://jsfiddle.net/u999xc85/1/

Answer 2

试试这个现在有转型＆amp;不透明效果。

＆＃13;

    .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;
    }

＆＃13;

    <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>

＆＃13;

悬停时叠加文字

2 个答案: