Let people have to admire the CSS effect _ experience Exchange

Author: EoE
1. Search
First you need to find a good effect ~ to copy
such as http://www.cssplay.co.uk/
Http://www.cssbeauty.com
You can always see it.

I accidentally passed Cssplay today.
Http://www.cssplay.co.uk/menus/magnifier2.html
It looks like it's funny.

Start your own topstyle and try it.
Suggest you see the fun style ~ Don't rush to see his css~ meaningless

2. DIY ~ Clothed




<title>A</title>

Tip: You can modify some of the code before running

I feel good to finish myself ~ ~ ~

mainly is a:hover Position:absolute; Margin of three ~
But then we found out that ~ie5 's a failed.

3. Take any coins short
It's time to look at someone else's CSS ~ ' Although it's also IE5 's a failure
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px; height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}
#enlarge Li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;}
Tip: You can modify some of the code before running

FT ~ Write a definition more than others ~ ~
His method is to use position:relative with the left top is the same with negative value to engage in ~

4. Extrapolate
Suddenly think of the recently to write the car polishing forum ~ posts below the page can be used to play ~




<title>A</title>

• 1


• 2


• 3


• 4


• 5


• 6


• 7

Tip: You can modify some of the code before running

Well, more fun ~ Give up IE ~




<title>A</title>

• 1


• 2


• 3


• 4


• 5


• 6


• 7

Tip: You can modify some of the code before running

The effect is not very ideal
Try to change the width of the back to the left side of the ~ but can't see the numbers ~ not good to see
I tried to use the same method.
Side with: After adding the picture on the left ~ but there are numbers on one side no ~ more difficult to see ~ ~ and can not do n pictures with numbers ~ extensibility is not good

Maybe that's the limit of the CSS itself.
Perhaps, with JS can be more simple solution ~ "

