鼠标滑动到图片时,图片出现遮罩

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .content-wrap {
      padding: 0;
      position: absolute;
      text-align: center;
       100%;
      top: 0;
      bottom: 0;
      display: table-cell;
      vertical-align: middle;
      overflow: hidden;
    }
    .content-wrap h1.entry-title {
      display: table;
      font-size: 110%;
      height: 100%;
      text-transform: uppercase;
       100%;
      margin:0;
    }

    .featured-image {
      display: table-cell;
      position: relative;
      transition: opacity .25s ease-in-out, background .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out, background .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out, background .25s ease-in-out;
      vertical-align: middle;
      color: #fff;
      text-decoration: none;
      opacity: 0;
      padding: 10%;
    }
    .featured-image:hover {
      opacity: 0.9;
      color: #fff;
      background: rgba(0,0,0,0.8);
    }

    img {
      max- 100%;
      height: auto;
    }

    </style>
  </head>

<body>

<div style="position: relative;">
  <div >
    <img width="480" height="640" src="img/app.png">
  </div>
  <div class="content-wrap">
    <h1 class="entry-title">
      <a href="" class="featured-image" rel="bookmark">Music & Fashion</a>
    </h1>
  </div>
</div>

</body>
</html>

原文地址:https://www.cnblogs.com/wuwenshi/p/css.html