Pure CSS Picture Demo

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" >
　　
Index.html
body{background: #ddd;  Font-family:arial, Helvetica, Sans-serif; ;}.    center{Margin:auto;    Text-align:center; width:600px;    height:180px; padding:0;}.    Center h1{font-size:68px;    Letter-spacing: -3px;    Font-weight:bold; margin:0;}.    Center p:first-of-type{font-size:38px;    margin:0; Color:rgba (51, 51, 51, 0.5);}. Center p{color: #333;}    ul.tupian{List-style-type:none; width:1000px;    height:800px;    Margin:auto; padding:0;}       Ul.tupian li{position:relative;        Float:left;    margin:15px; width:270px;      height:190px;    Overflow:hidden;    border-radius:5px;    box-shadow:1px 1px 1px rgba (0, 0, 0, 0.2);    -webkit-transition:all 0.15s ease-in; Transition:all 0.15s ease-in;}    Ul.tupian li:hover{z-index:11;    -webkit-transform:scale (1.2) translate3d (0, -30px, 0) rotate (2.5deg); Transform:scale (1.2) translate3d (0, -30px, 0) rotate (2.5deg);}    div.details{border-bottom-left-radius:5px; Border-bottom-right-radius:5px;    Position:absolute;    bottom:0px;    padding:10px 0px 10px 0px;    width:270px; Background:rgba (255, 255, 255, 0.7);}    Div.details p {padding-left:10px;    margin:0;    Float:left; font-size:15px;}    Div.details A.anniu {position:absolute;    padding:5px 7px 5px 7px;    top:5px;    right:7px;    Background-color:rgba (0, 0, 0, 0.13);    Color: #0090e2;    font-size:12px;    border-radius:15px;    Text-decoration:none;    -webkit-transition:all 0.15s ease-in; Transition:all 0.15s ease-in;} Div.details a.anniu:hover{background-color: #0090e2; color: #fff;}    Ul.tupian img{width:270px; height:190px;}    li[id]{Overflow:hidden;    Position:absolute;    width:0px;    height:0px;    left:0;    top:0;    opacity:0;    Background:rgba (0,0,0,.8);    -webkit-transition:opacity 0.2s Cubic-bezier (0,0,0,1); Transition:opacity 0.2s Cubic-bezier (0,0,0,1);}    Li[id]:target div.xinxi{width:400px; height:200px; Position:relative;    margin:0 Auto;    top:15%;    Background: #fff;    BORDER:1PX solid; padding:0;}    Div.xinxi p:first-child {background-color: #0090E2;    padding:10px; margin:0;}    a.close{background: #000;    Position:absolute;    Top: -10px;    right:10px;    line-height:0;    Color: #fff;    Text-align:center;    Font-weight:bold;    border:2px solid #fff;    padding:12px 9px 9px; border-radius:30px;}    li[id]:target{width:100%;    height:100%;    Opacity:1;    z-index:30;   position:fixed;    top:0px;    Overflow-x: Hidden; /* Overflow-y: scroll; */margin-bottom:25px;}
　　
Tepian.css