Css3案例

浏览数：22 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<meta charset=utf-8>
    <head>
        <style> 
            body{
                backgound:#f9f9f9;
            }
            .img{
                position: absolute;
                width: 300px;
                height: 200px;
                border:10px solid #ccc;
                overflow:hidden;

            }
            .img img{
                width:100%;
                height:100%;
                transition:all .3s ease;
            }
            .img:hover img{
                -webkit-transform:scale(1.5);
            }
            .back{
                z-index:9999;
                background-color: rgba(219,127,8, 0);
                position: absolute;
                top: 0;
                left: 0;
                height:100%;
                text-align: center;
                color: #000;
                -webkit-transition:all .5s  ease;
                
            }
            .back h2{
                text-align:center;
                color:#000;
                -webkit-transition:all .5s  ease;
                background-color: rgba(0,0,0, 0.5);
                height:30px;
                position: relative;
                top: -55px;
            }
            .back p{
                position: relative;
                bottom: -130px;
                -webkit-transition:all .5s  ease;
            }
            
            
            .back:hover h2{
                text-align:center;
                color:#fff;
                top:0;
            }

            .back:hover p{
                text-align:center;
                color:#fff;
                bottom:0;
            }

            
            .info{
                background-color: rgba(0,0,0,.7);
                padding:5px;
                color:#fff;
                text-decoration: none;
                -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
               filter: alpha(opacity=0);
               opacity: 0;
               
               -webkit-transition: all 0.2s ease-in-out;
               -moz-transition: all 0.2s ease-in-out;
               -o-transition: all 0.2s ease-in-out;
               -ms-transition: all 0.2s ease-in-out;
               transition: all 0.2s ease-in-out;
            }
            .back:hover a{
                -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
               filter: alpha(opacity=100);
               opacity: 1;
               -webkit-transform: translateY(0px);
               -moz-transform: translateY(0px);
               -o-transform: translateY(0px);
               -ms-transform: translateY(0px);
               transform: translateY(0px);
            }
            
            .back:hover{
                background-color: rgba(219,127,8,.7);
            }

        </style>
    </head>
<body>

<div class="img">

    <img src="1.jpg">
    <div class="back">
        <h2>Hover Style #1</h2>
        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
        <a href="#" class="info">Read More</a>
    </div>
    
</div>




</body>
</html>