Awesome CSS effect-Experience Exchange

Awesome CSS effect by eoe
1. Searching
Find the desired effect first ~ To copy
Like http://www.cssplay.co.uk/
Http://www.cssbeauty.com
And so on.

Miss cssplay today
Http://www.cssplay.co.uk/menus/magnifier2.html
It seems like you are playing well.

Start topstyle by yourself.
We recommend that you see interesting styles ~ Don't rush to look at his CSS ~ Meaningless

2. Do it yourself ~ Rich clothes and food




A

Tip: you can modify some code before running it.

I feel good about myself ~~~

It mainly involves three parts: a: hover position: absolute; margin ~
But only after this is done ~ The A of IE5 is invalid.

3. Search for the patch
It's time to look at people's CSS ~ 'Although it is 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 code before running it.

FT ~ Write a definition more than others ~~
The method is to use position: relative and left top, which are the same as negative values ~

4. Let alone
I suddenly thought of the recently written car wiping Forum ~ The pages below the post can be used in this way ~




A

• 1


• 2


• 3


• 4


• 5


• 6


• 7

Tip: you can modify some code before running it.

Okay, it's more fun ~ Quit IE ~




A

• 1


• 2


• 3


• 4


• 5


• 6


• 7

Tip: you can modify some code before running it.

The effect is not very satisfactory.
I tried to change the width of A to the left side ~ But no number is displayed ~ Poor looking
I also tried using the original method.
Use one side: add the image to the left after ~ However ~ One side has numbers while the other side does not ~ Not nice-looking ~~ N images with numbers cannot be made ~ Poor scalability

Maybe this is restricted by css.
Maybe ~ JS can be used for a simpler solution ~ "'