Learn Animated Hover

when I'm doing blogwalking, I found an article from sohtanaka.com about hover effect on the image.
nah, let's practice

Light Shadow

A simple light shadow effect can be achieved with using shades of grey with borders. With CSS3 you can achieve

a real shadow effect using box shadow, but this is a clean and simple way that works in all browsers.

CSS

.shadow {
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-bottom: 2px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

puluth

Pressed

The pressed effect is very similar to the CSS Letter Press technique but we rely solely on border colors to

achieve the effect. Add some CSS3 rounded corners and you can achieve a very clean pressed look to your

layouts.

CSS

.pressed {
 color: #fff;
 padding: 20px;
 background: #111;
 border: 1px solid #000;
 border-right: 1px solid #353535;
 border-bottom: 1px solid #353535;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

Beveled
This technique is very similar to your double border technique commonly used with images. With a little bit of

tinkering, you can achieve a subtle beveled effect using the outline property.

CSS

img.light {
 outline: 1px solid #ddd;
 border-top: 1px solid #fff;
 padding: 10px;
 background: #f0f0f0;
}
img.dark {
 outline: 1px solid #111;
 border-top: 1px solid #555;
 padding: 10px;
 background: #333;
}

Indented

I use this technique often when creating vertical menus and lists. Its a simple combination of top and bottom

borders with different shades of the background color. Keep in mind the first-child and last-child CSS

selectors are not supported by older browsers. You can read more about this here. To get around it, you can

use some jQuery to support older browsers.

CSS

#indented ul{
 margin: 20px 0; padding: 0;
 list-style: none;
}
#indented ul li {
 border-top: 1px solid #333;
 border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
 padding: 10px;
 display: block;
 color: #fff;
 text-decoration: none;
}
#indented ul li a:hover {background: #111;}

Finish.