[Tutorial] CSS background Image Hover

SeanPreston · 06-24-2009, 01:46 AM

Ok, Here's my second tutorial for NamePros, My last one was on creating HTML pages, I feel its time to step it up and start to learn CSS.

In this first CSS tutorial will will create something VERY simple but it's something that you will use as a web designer a lot, Image Manipulation. I say Image Manipulation, its more just a fancy hover.

Step 1
Ok, We need to start by creating 2 files:

Code:

index.html
style.css

Step 2
Next we need to connect the stylesheet (style.css) to the html page (index.html), Insert the below code between your <head> and </head> tags.

Code:

<link href="style.css" rel="stylesheet" type="text/css" />

Step 3
????: NamePros.com http://www.namepros.com/webmaster-tutorials/592084-tutorial-css-background-image-hover.html
We now need to create our div, this is simply a container that will allow the stylesheet to relate to the html document. Insert the below code between your <body> and </body> tags.

Code:

<div id="image_roll">

</div>

Step 4
Now open your CSS file (style.css) and enter the following first set of functions. This will set your original image. Please replace SIZE with your image size and "original_image.jpg" with the image you want to show before the hover.

Code:

#image_roll {
display: block;     
width: SIZEpx;     
height: SIZEpx;      
background: url("original_image.jpg"); 
}

Step 5 - FINAL STEP
We will now create the hover. Below your last group of functions in your CSS file enter the code below, note that the first line now says ":hover" this will make the div be replaced with these settings when the user hovers over the original div. Like before, please change SIZE and "new_image.jpg", this should be your new image.

Code:

#image_roll:hover {
display: block;     
width: SIZEpx;     
height: SIZEpx;      
background: url("new_image.jpg");
}

That's it your done.
Enjoy!
P.S Mind the spelling

Boldrugs · 07-27-2009, 01:50 PM

Hi,

Thanks SeanPreston to let us know about css for image link and .hover.

Can you share css for write some text over image in details please?

Thanks

SeanPreston · 08-02-2009, 06:32 AM

Sure It's really simple....

Just create a div and set the background-image then just type in between the HTML DIV tags.

somebody_rb · 08-30-2009, 04:14 AM

thanks for the tut

06-24-2009, 01:46 AM	THREAD STARTER #1 (permalink)
SeanPreston Senior Member Join Date: Nov 2005 Location: UK Posts: 1,278	[Tutorial] CSS background Image Hover Ok, Here's my second tutorial for NamePros, My last one was on creating HTML pages, I feel its time to step it up and start to learn CSS. In this first CSS tutorial will will create something VERY simple but it's something that you will use as a web designer a lot, Image Manipulation. I say Image Manipulation, its more just a fancy hover. Step 1 Ok, We need to start by creating 2 files: Code: index.html style.css Step 2 Next we need to connect the stylesheet (style.css) to the html page (index.html), Insert the below code between your <head> and </head> tags. Code: <link href="style.css" rel="stylesheet" type="text/css" /> Step 3 ????: NamePros.com http://www.namepros.com/webmaster-tutorials/592084-tutorial-css-background-image-hover.html We now need to create our div, this is simply a container that will allow the stylesheet to relate to the html document. Insert the below code between your <body> and </body> tags. Code: <div id="image_roll"> </div> Step 4 Now open your CSS file (style.css) and enter the following first set of functions. This will set your original image. Please replace SIZE with your image size and "original_image.jpg" with the image you want to show before the hover. Code: #image_roll { display: block; width: SIZEpx; height: SIZEpx; background: url("original_image.jpg"); } Step 5 - FINAL STEP We will now create the hover. Below your last group of functions in your CSS file enter the code below, note that the first line now says ":hover" this will make the div be replaced with these settings when the user hovers over the original div. Like before, please change SIZE and "new_image.jpg", this should be your new image. Code: #image_roll:hover { display: block; width: SIZEpx; height: SIZEpx; background: url("new_image.jpg"); } That's it your done. Enjoy! P.S Mind the spelling

07-27-2009, 01:50 PM	#2 (permalink)
Boldrugs New Member Join Date: Jul 2009 Posts: 19	Hi, Thanks SeanPreston to let us know about css for image link and .hover. Can you share css for write some text over image in details please? Thanks __________________ Area Rugs \| Contemporary Area Rugs

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Need white background for image	namep88	Web Development Wanted	3	08-12-2008 12:30 AM
how to do a background image with line?	Stephen3	Web Design Discussion	8	07-15-2006 05:58 AM
Greatest Image Gallery Tutorial Ever	Wybe	Webmaster Tutorials	5	12-20-2005 11:51 AM
background image trouble!!!	virgile00	Web Design Discussion	2	11-08-2003 03:16 PM
pb with background (css)	virgile00	Graphic Design / Flash	1	11-06-2003 09:41 AM

08-02-2009, 06:32 AM	THREAD STARTER #3 (permalink)
SeanPreston Senior Member Join Date: Nov 2005 Location: UK Posts: 1,278	Sure It's really simple.... Just create a div and set the background-image then just type in between the HTML DIV tags.

08-30-2009, 04:14 AM	#4 (permalink)
somebody_rb Account Suspended Join Date: Aug 2009 Posts: 76	thanks for the tut

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