How to use the codes belowFind the effect you would like to use and copy the coding in the Code column. You can do this by highlighting the text, right clicking it and selecting copy. Now paste it somewhere in your profile, or within the body of your web page. |
|
Description |
Code |
| This will make all images turn gray. However, if you hover over the image it will turn to color. |
<style type="text/css">
a:link img {filter:gray;}
a:visited img {filter:gray;}
a:hover img {filter:none;}
</style> |
| This will turn all images gray when you hover over them. |
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:gray;}
</style> |
| This will flip an image horizontally when it is hovered over. |
<style type="text/css">
a:hover img {filter:flipv;}
</style> |
| This will flip an image vertically when it is hovered over. |
<style type="text/css">
a:hover img {filter:fliph;}
</style> |
| This will blur an image when it is hovered over. Changing the values will alter the blur for you. |
<style type="text/css">
a:hover img {filter: blur(add = 0, direction = 225, strength = 10)}
</style> |
| This will blur an image and make the image normal when it is hovered over. Changing the values will alter the blur for you. |
<style type="text/css">
a:link img {filter:blur(add = 0, direction = , strength = 10);}
a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}
a:hover img {filter: none}
</style> |
| This will emboss an image that is hovered over. |
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:progid:dximagetransform.microsoft.emboss;}
</style> |
| This will emboss an image and make it normal when it is hovered over. |
<style type="text/css">
a:link img {filter:progid:dximagetransform.microsoft.emboss;}
a:visited img {filter:progid:dximagetransform.microsoft.emboss;}
a:hover img {filter:none;}
</style> |
| This will engrave an image when it is hovered over. |
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:progid:dximagetransform.microsoft.engrave;}
</style> |
| This will have an image engraved but turn normal when hovered over. |
<style type="text/css">
a:link img {filter:progid:dximagetransform.microsoft.engrave;}
a:visited img {filter:progid:dximagetransform.microsoft.engrave;}
a:hover img {filter:none;}
</style> |
| This will invert the colors of an image when it is hovered over. |
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:invert;}
</style> |
| This will invert images and make them normal when hovered over. |
<style type="text/css">
a:link img {filter:invert;}
a:visited img {filter:invert;}
a:hover img {filter:none;}
</style> |
| This is what is called an x-ray image, check it out you will like it. |
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:xray();}
</style> |
| This will make images x-rayed and turn normal when hovered over. |
<style type="text/css">
a:link img {filter:xray();}
a:visited img {filter:xray();}
a:hover img {filter:none;}
</style> |
| This make an image transparent when hovered over. You can change the opacity from 0 - 100 for different variations. |
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:alpha(opacity=50);}
</style> |
| This will make images transparent and make them normal when hovered over. |
<style type="text/css">
a:link img {filter:alpha(opacity=50);}
a:visited img {filter:alpha(opacity=50);}
a:hover img {filter:none;}
</style> |
|
|
|
