CSS Touchs

J4m!3 · 10-22-2005, 01:25 AM

Ever wondered how people make images fade and then un-fade when you hover the mouse over the, in this tutorial you will find out just how this ever wondered how people make images fade and then un-fade when you hover the mouse over them, in this tutorial you will find out just how this happens and how to do it. To start off you must place this code between the head tags.

Code:

<style type="text/css">
        .highlightit img{
        filter:progid:DXImageTransform.Microsoft.Alpha(opa city=50);
        -moz-opacity: 0.5;
        }
       .highlightit:hover img{
        filter:progid:DXImageTransform.Microsoft.Alpha(opa city=100);
        -moz-opacity: 1;
        </style>

After this you have to have every image that you want highlighted, code looking like this:
????: NamePros.com http://www.namepros.com/webmaster-tutorials/133872-css-touchs.html

Code:

<a href="Link here" class="highlightit">[img]Image          path here[/img]</a>

You can edit the opacity of the image whens normal and got the mouse above it by typing a new number in the opacity brackets, for example:

Code:

(opacity=30)

---------------------------------

In this tutorial you will learn how to completely customise the colour of your links. Put this in the head tags.

Code:

<style type="text/css">
        <!--
        a.linkStyleName:link {color: white}
        a.linkStyleName:visited {color: red; }
        a.linkStyleName:hover {color: pink; }
        a.linkStyleName:active {color: yellow; }
        -->
        </style>

Change the colours to suit your site, right now everytime you want to apply this code to your links. Your links should now look like this:

Code:

<a href="Link Goes Here" class="linkStyleName">Text          Here</a>

Copyright Jamie Salvage.

J4m!3 · 10-24-2005, 05:57 AM

No one?

Breakpoint · 10-29-2005, 12:55 AM

i dont know css but interesting

Maverick · 11-05-2005, 05:33 PM

Nice little tut. Thanks for sharing.

Wybe · 11-06-2005, 03:28 AM

This is sweet man. I kinda always bookmark sites I know use this technique, because I plan on using it some time, but ofcourse I always forget etc. etc. This has really laid it out right in front of me

Perfect, thanks!

Rive · 11-07-2005, 10:38 AM

Great tutorial, very interesting and helpful.

_______________________________________
Brochures Printing Services
"Attempt the impossible in order to improve your work."

Martin Brinkmann · 11-18-2005, 03:40 PM

how about a css tut that shows how to create a design that looks similar in different browsers, that would come in handy right now.

thanks for the other tips

dongan · 11-25-2005, 03:26 AM

cool one.

10-22-2005, 01:25 AM	THREAD STARTER #1 (permalink)
J4m!3 NamePros Member Join Date: Oct 2005 Location: Clevedon, UK Posts: 198	CSS Touchs Ever wondered how people make images fade and then un-fade when you hover the mouse over the, in this tutorial you will find out just how this ever wondered how people make images fade and then un-fade when you hover the mouse over them, in this tutorial you will find out just how this happens and how to do it. To start off you must place this code between the head tags. Code: <style type="text/css"> .highlightit img{ filter:progid:DXImageTransform.Microsoft.Alpha(opa city=50); -moz-opacity: 0.5; } .highlightit:hover img{ filter:progid:DXImageTransform.Microsoft.Alpha(opa city=100); -moz-opacity: 1; </style> After this you have to have every image that you want highlighted, code looking like this: ????: NamePros.com http://www.namepros.com/webmaster-tutorials/133872-css-touchs.html Code: <a href="Link here" class="highlightit">[img]Image path here[/img]</a> You can edit the opacity of the image whens normal and got the mouse above it by typing a new number in the opacity brackets, for example: Code: (opacity=30) --------------------------------- In this tutorial you will learn how to completely customise the colour of your links. Put this in the head tags. Code: <style type="text/css"> <!-- a.linkStyleName:link {color: white} a.linkStyleName:visited {color: red; } a.linkStyleName:hover {color: pink; } a.linkStyleName:active {color: yellow; } --> </style> Change the colours to suit your site, right now everytime you want to apply this code to your links. Your links should now look like this: Code: <a href="Link Goes Here" class="linkStyleName">Text Here</a> Copyright Jamie Salvage. __________________ - Submit Gas Price related Pix & Rants @ PumpPanic.com -

10-24-2005, 05:57 AM	THREAD STARTER #2 (permalink)
J4m!3 NamePros Member Join Date: Oct 2005 Location: Clevedon, UK Posts: 198	No one? __________________ - Submit Gas Price related Pix & Rants @ PumpPanic.com -

11-05-2005, 05:33 PM	#4 (permalink)
Maverick NamePros Regular Join Date: Jun 2005 Location: Canada Posts: 808	Nice little tut. Thanks for sharing. __________________ GamersPit - I-Searches Directory

11-06-2005, 03:28 AM	#5 (permalink)
Wybe NamePros Member Join Date: Nov 2005 Location: the Netherlands Posts: 127	This is sweet man. I kinda always bookmark sites I know use this technique, because I plan on using it some time, but ofcourse I always forget etc. etc. This has really laid it out right in front of me Perfect, thanks! __________________ accepts paypal and cookies

11-18-2005, 03:40 PM	#7 (permalink)
Martin Brinkmann NamePros Member Join Date: Nov 2005 Posts: 133	how about a css tut that shows how to create a design that looks similar in different browsers, that would come in handy right now. thanks for the other tips __________________ gHacks.net gameokratie.de

10-29-2005, 12:55 AM	#3 (permalink)
Breakpoint NamePros Member Join Date: Oct 2005 Posts: 111	i dont know css but interesting

11-07-2005, 10:38 AM	#6 (permalink)
Rive NamePros Member Join Date: Sep 2005 Posts: 55	Great tutorial, very interesting and helpful. _______________________________________ Brochures Printing Services "Attempt the impossible in order to improve your work."

11-25-2005, 03:26 AM	#8 (permalink)
dongan Senior Member Join Date: Nov 2005 Location: www.mercuryminds.com Posts: 2,044	cool one. __________________ MercuryMinds - Professional X-Cart Design, X-Cart Development, X-Cart Customization Services MercuryMinds - X-Cart addons, modules

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
To CSS or not to CSS?	ThreeD	Web Design Discussion	27	10-22-2005 06:34 PM
CSS help please	to-binman	Programming	6	06-05-2005 02:37 AM
CSS Help Needed	Chorei	Web Design Discussion	0	04-12-2005 10:28 AM
CSS: what's the use of it?	lucesei	Programming	13	04-12-2004 07:21 AM