zoukankan      html  css  js  c++  java
  • 鼠标滑动到图片时,图片出现遮罩

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

  • 相关阅读:
    二级指针内存模型(二)
    Winserver-FailoverCluster验证异常
    IIS-This configuration section cannot be used at this path.
    SQL SERVER-Extendevent捕获堵塞
    SQL SERVER-Extendevent
    Powershell-加域脚本
    SQL SERVER-端口Port
    WinServer-SMTP服务
    Linux-开机启动程序
    SQL SERVER-修改服务器名称
  • 原文地址:https://www.cnblogs.com/wuwenshi/p/css.html
Copyright © 2011-2022 走看看