Image rollover effects with CSS filters

css| Filter | Special effects

Picture Horizontal Flip

Code:

1. Internal Insert Type

Insert between 〈head〉 and 〈/head〉 :

Style type = text/css〉 . TURNH{FILTER:FLIPH} /style〉

Then add class= "Turnh"to the Picture property code.

Note: In the code inserted between 〈head〉 and 〈/head〉, there is a "." Before Turnh. (not including quotes), please be sure not to miss out.

2. Direct Insertion Type

In the Picture property code, add:

Style= "Filter:fliph"

The effect is shown in Figure 1.

Figure 1

Features: Flip the picture horizontally by using the CSS "FLIPH" filter. The "Fliph" filter is one of 6 parameter-free filters in CSS that can be used directly and can be used in Dreamweaver as a filter with parameters.

Picture flipped vertically

Code:

1. Internal Insert Type

Insert between 〈head〉 and 〈/head〉 :

〈style type = text/css〉 . TURNV{FILTER:FLIPV} 〈/style〉

Then add class= "TURNV"to the Picture property code.

Note: In the code inserted between 〈head〉 and 〈/head〉, there is a "." Before Turnv. (not including quotes), please be sure not to miss out.

2. Direct insertion Type

In the Picture property code, add:

Style= "FILTER:FLIPV"

The effect is shown in Figure 2.

Figure 2

Features: Flip the picture vertically by using the FLIPV filter, "the" filter, with the CSS.

The above two filters if reasonable cooperation can also make a similar reflection in the water effect oh, the specific process will please you to grope, here will not say!