zoukankan      html  css  js  c++  java
  • CSS仿艺龙首页鼠标移入图片放大

    CSS仿艺龙首页鼠标移入图片放大,效果似乎没有js好。。。。。。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片放大</title>
        <style>
            *{
                padding:0;
                margin:0;
            }
            body{
                padding-top: 100px;
            }
            li{
                list-style: none;
                height: 260px;
            }
            ul{
                1200px;
                height:250px;
                overflow:hidden;
                margin: 0 auto;
            }
            li{
                float:left;
                position: relative;
                200px;
                -webkit-transition: width 0.05s ease-out;
                -moz-transition: width 0.05s ease-out;
                -ms-transition: width 0.05s ease-out;
                -o-transition: width 0.05s ase-out;
                transition: width 0.05s ease-out;
            }
            .mask_b{
                position: absolute;
                overflow: hidden;
                 100%;
                height: 100%;
                left: 0;
                top: 0;
                background: rgba(0,0,0,.3);
            }
           .mask_b:hover{
                background: none;
            }
            .text{
                color: #fff;
                 30px;
                margin: 0 auto;
                display: block;
                font: 30px/30px Microsoft Yahei;
                position: relative;
                padding: 30px 0 0 0;
            }
            li:hover{
                400px;
            }
            ul:hover li:not(:hover){
                160px;
            }
            ul:hover li:hover .text{
                display: none;
            }
            .pic-auto{
                height: 100%;
            }
            .pic-auto1{
                background: url(http://img.elongstatic.com/index/ifold/20150120_ifold1.jpg) no-repeat center 0;
            }
            .pic-auto2{
                background: url(http://img.elongstatic.com/index/ifold/20150120_ifold2.jpg) no-repeat center 0;
            }
            .pic-auto3{
                background: url(http://img.elongstatic.com/index/ifold/20150120_ifold3.jpg) no-repeat center 0;
            }
            .pic-auto4{
                background: url(http://img.elongstatic.com/index/ifold/20150120_ifold4.jpg) no-repeat center 0;
            }
            .pic-auto5{
                background: url(http://img.elongstatic.com/index/ifold/20150120_ifold5.jpg) no-repeat center 0;
            }
            .pic-auto6{
                background: url(http://img.elongstatic.com/index/ifold/20150120_ifold6.jpg) no-repeat center 0;
            }
        </style>
    </head>
    <body>
    <ul>
        <li>
            <a href="#">
                <div class="mask_b">
                    <span class="text">园林酒店</span>
                </div>
                <div class="pic-auto pic-auto1"></div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="mask_b">
                    <span class="text">情侣酒店</span>
                </div> 
                <div class="pic-auto pic-auto2"></div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="mask_b">
                    <span class="text">设计师酒店</span>
                </div>
                <div class="pic-auto pic-auto3"></div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="mask_b">
                    <span class="text">青年旅社</span>
                </div>
                <div class="pic-auto pic-auto4"></div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="mask_b">
                    <span class="text">特色客栈</span>
                </div> 
                <div class="pic-auto pic-auto5"></div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="mask_b">
                    <span class="text">海岛酒店</span>
                </div> 
                <div class="pic-auto pic-auto6"></div>
            </a>
        </li>
    </ul>
    </body>
    </html>
    
  • 相关阅读:
    .NET程序内存分析工具CLRProfiler的使用
    Hudson、Jenkins的node节点设置(分布式处理自动化测试用例)
    Ruby+watir不能定位新打开的窗口解决办法
    L邮政挂号信查询
    ruby读写txt文件
    Jenkins、Hudson安装、配置详细记录
    nagios原理(二)
    存储过程例子
    存储过程 插入明细表
    nagios原理(一)
  • 原文地址:https://www.cnblogs.com/fangfeiyue/p/7382497.html
Copyright © 2011-2022 走看看