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%);
    }
  • 相关阅读:
    指针
    使用函数
    数组,切片和字典
    CUDA 进阶学习
    makefile 常用函数
    内存(RAM或ROM)和FLASH存储的真正区别总结
    射频,系带,调制解调器
    固态激光雷达
    毫米波雷达
    对比感知技术的硬件或者算法的关键技术指标
  • 原文地址:https://www.cnblogs.com/silences/p/6854915.html
Copyright © 2011-2022 走看看