1.
[Image]capturing. jpg
? 2. Code [CSS] Code
Body {
Background: #000;
OVERFLOW-Y: scroll;
}
. Items {
margin:40px Auto;
width:1110px;
}
A
Color: #FFF;
Cursor:pointer;
margin:0 0 20px 620px;
Text-align:center;
Text-decoration:none;
}
a:hover {
color:red;
}
A:hover ~ Div.items {
border:1px solid #FFF;
Background:url (' http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg ') no-repeat Scroll Center Center Transparent
height:500px;
}
a:hover ~ Div.items > *{
Display:none;
}
. Item {
border:10px solid #FFF;
Cursor:pointer;
Float:left;
height:231px;
width:350px;
-moz-transform:scale (0.8);
-moz-transition:all 0.5s ease-in-out 0s;
}
. item > Div {
Background:rgba (0,0,0,0.7);
height:100%;
left:0;
Position:absolute;
top:0;
width:100%;
-moz-transition:all 0.5s ease-in-out 0s;
}
. item:hover {
-moz-transform:scale (1);
}
. item-1:hover > Div {
height:0%
}
. item-2:hover > Div {
height:0%;
top:50%;
}
. item-3:hover > Div {
height:0%;
left:50%;
top:50%;
width:0%;
}
. item-4:hover > Div {
height:0%;
left:50%;
top:50%;
width:0%;
-moz-transform:rotate (360DEG);
}
. item-5:hover > Div {
height:0%;
left:50%;
top:50%;
width:0%;
-moz-transform:rotate ( -360DEG);
}
. item-6 > Div {
height:50%;
width:50%;
}
. item-6 > Div:nth-child (2) {
left:50%;
top:0;
}
. item-6 > Div:nth-child (3) {
left:0;
top:50%;
}
. item-6 > Div:nth-child (4) {
left:50%;
top:50%;
}
. item-6:hover > Div {
height:0;
width:0;
/*-moz-transform:rotate ( -360DEG); * *
}
. Item-6:hover > Div:nth-child (2) {
left:100%;
/*-moz-transform:rotate (360DEG); */
}
. Item-6:hover > Div:nth-child (3) {
top:100%;
}
. Item-6:hover > Div:nth-child (4) {
left:100%;
top:100%;
/*-moz-transform:rotate (360DEG); */
}
. clear:after {
Clear:both;
Content: ' \0020 ';
Display:block;
height:0;
Overflow:hidden;
Visibility:hidden;
width:0;
}
#preloader {
Background-image:url (' http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg ');
Height:0;http://www.bizhizu.cn/shouhui/?
width:0;
}
3. [Code][html] Code
<body> Hand Painted pictures
<a class= "Clear" > Please don't point me. </a>
<div class= "items Clear" >
<div class= "Item Item-1" >
<div></div>
</div>
<div class= "Item Item-2" >
<div></div>
</div>
<div class= "Item Item-3" >
<div></div>
</div>
<div class= "Item Item-4" >
<div></div>
</div>
<div class= "Item Item-5" >
<div></div>
</div>
<div class= "Item Item-6" >
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id= "Preloader" ></div>
</body>
HTML: a simple hover effect