zoukankan      html  css  js  c++  java
  • 鼠标滑过天极爱透明背景

    鼠标滑动的时候添加背景,字体颜色变成白色

    添加的时候总是出现模糊的颜色

    鼠标滑动到外层item的时候overlay透明度变成1

    .services .service-item:hover .overlay

    文字p重要的是添加absolute的定位,才能显示在overlay的上面position: absolute;

    .services {
        padding: 120px 0px 90px;
    }
    
    .services .service-item {
        position: relative;
        min-height: 250px;
        text-align: center;
        margin-bottom: 30px;
        background-color: #fff;
        -webkit-transition: .25s;
        transition: .25s;
    }
    
    .services .service-item .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, .6) url(../../images/pro-bg.png) no-repeat center center;
        background-size: 80%;
        opacity: 0;
        transition: .5s;
    }
    
    .services .service-item:hover .overlay {
        z-index: 1;
        opacity: 1;
    }
    
    .services .service-item p {
        padding: 30px;
        color: #000000;
        position: absolute;
        z-index: 1000;
    }
    
    .services .service-item:hover p {
        color: #ffffff;
        position: absolute;
        z-index: 1000;
        opacity: 1;
    }
    
    .services .service-item:hover {
        -moz-box-shadow: 0px 4px 16px 0px #808080;
        -webkit-box-shadow: 0px 4px 16px 0px #808080;
        box-shadow: 0px 4px 16px 0px #808080;
        -webkit-transform: translateY(-2%);
        transform: translateY(-2%);
    }
  • 相关阅读:
    如何评估自己对外界认知是否正确?
    冒泡排序与两数交换的实现与优化
    数据库和ADO
    JavaScript的中类型转换
    UltraEdit注册机原理简单说明
    别让用户发呆—设计中的防呆策略[转]
    Html 5 版 电子时钟
    SQL 优化总结(三) SQL子句
    SQL 优化总结(二) 索引
    Html 5 简介
  • 原文地址:https://www.cnblogs.com/silences/p/6854915.html
Copyright © 2011-2022 走看看