Study blogger tips

Thứ Năm, 4 tháng 9, 2014

Hover trong CSS

CSS hover effects

CSS hover effects gives us the ability to animate changes to a CSS property value. In the following lesson we are going to follow that up with different kinds of effects specifically built for use with images. However, these effects can make your site feel much more dynamic and alive. The effects we will be using today all use code that is supported by modern browsers.

Simple Hover Effects

The following code shows how to show a hover effect on Box Shadow.

Source Code

<!DOCTYPE html> <html > <head> <style type="text/css"> .box { width: 150px; border: 1px solid #9325BC; padding: 10px; } .box:hover { -moz-box-shadow: 0 0 10px #ccc; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; } </style> </head> <body> <div class="box"> Move your mouse here </div> </body> </html>

Image Hover Effects

The following CSS code shows how to present an Image hover effects.

Source Code

Đọc thêm »