Amazing Hover Effects with CSS3

Box Shadow

This effect will create a shadow around your div container when you hover over it:

CSS:

div.shadow { width: 300px; margin: 20px; border: 1px solid #ccc; padding: 10px; }   div.shadow:hover { -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0,0,0,0.5); }

HTML:

<div class="shadow"> Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in. </div>

DEMO:

Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in.

That one’s pretty simple and straightforward, but still kind of cool. It can also be used on images.