The first step of the Web front--photo wall (thumbnail)

Toss a few days, finally finally solved a photo wall problem yo!

First on:

He will be like Baidu Picture library, the mouse moved to which picture, which picture will enlarge appears. See:

Haha, the most proud of is to know how to put the picture in the place I want to put, the size of the display can also, at the beginning, the picture put, the mouse moved to the picture will become larger, but other pictures will be the corresponding mobile location, particularly ugly,

Now understand the "block-level element", also know, why not directly prevent the picture, but put IMG in a inside, a and put in Li inside, because this can achieve more effect.

Not much to say, on the code, and then comment:

<! DOCTYPE html></div></body>
CSS style:
@charset "gb2312";/* CSS Document */* {margin:0; padding:0}a:link, a:visited {text-decoration:none;} UL, Li {list-style-type:none}img {border:0;}
/* This is the outermost block element (Div is originally a block-level element), which is equivalent to hanging a photo wall */.thumbs {width:100%;background: #559664; padding:30px 0; Overflow:hidden; Border-bottom: #226039 1px solid}
/* This is a block element in the inner layer, equivalent to the first area of the wall hanging photo */.wall_a {display:block;        Float:left;　　　　        width:750px;　　　　height:450px;        /* Width and height should not be too large, calculate the size, here is the size of 3 photos in the dimensions of the picture design * * line-height:50px;        Overflow:hidden;        position:relative;  Z-index:1; }
/* The style of the list */.wall_a li{float:left;        margin-right:2px;        border:1px solid #999;            padding:1px; }
/* This is another block-level element, Display:block, the equivalent of a small photo frame, but the size of the picture frame is smaller than the photo, so, when the photo is stored, the photo is clipped */.wall_a a {display:block;        Float:left;        width:200px;        height:100px;        Overflow:hidden;        position:relative;　　　　Z-index:1; /* This is very important, set the priority of the stack */}
/* photo, do not set the size, otherwise there will be no big effect yo, set up the equivalent of the picture cut, there is no original image of */.wall_a a img{float:left;        Position:absolute;            Overflow:hidden; }
/* When the mouse moves to a block-level element, the part of the hidden photo will appear */.wall_a a:hover {overflow:visible;　　z-index:1000;            The high priority setting is so that it can cover other photos ...  Border:none;            }.wall_a a:hover img{border:1px solid #999;            Background: #fff;        padding:2px; }
The first step of the Web front--photo wall (thumbnail)