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>

  • 相关阅读:
    PyQt信号传递的方法
    tensorflow 遇到的细节问题
    正则表达式的总结
    ImageFont与PIL
    pytorch源码解析-动态接口宏
    intel windows caffe加速
    cnn可视化 感受野(receptive field)可视化
    Ubuntu安装使用latex
    使用caffe训练mnist数据集
    caffe使用ctrl-c不能保存模型
  • 原文地址:https://www.cnblogs.com/wuwenshi/p/css.html
Copyright © 2011-2022 走看看