CSS制作鼠标覆盖时的‘编辑头像’效果

 

正常时：

鼠标覆盖：

 

要做这个效果，需要一张图片，一个span即可

<div class="mb15">

  <div class="hy-txa">

    <img src="xx.png"/>

    <span>点击编辑头像</span>

  </div>

</div>

下面是css：

<style class="mb15">

    .hy-txa span { 
        visibility:hidden;
        width:100%;
        height:100%;
        position:absolute;
        color:white;
        text-align:center;
        line-height:120px;
        left:0;
        top:0;
        background:#000;
        opacity:.5; 
    }

    .hy-txa:hover span { visibility:visible; }

</style>

 

重要的字段：

span的style中：  

visibility = hideen

background = #000;

元素的不透明级别opacity = .5

然后将span强行覆盖图片





最后在span的hover中还原span的可见度即可.

visibility:visible

 

转载于:https://my.oschina.net/tasker/blog/794900