Advertisement

Enlarge a image when mouse hover with CSS

 (Read 8908 times)

Admin

  • Administrator
  • Hero Member
  • *****
  • Posts: 1549
    • The Jucktion
Enlarge a image when mouse hover with CSS
« on: Jul 08, 2010, 04:22 PM »
Alright, maybe you want to have a small image to speed the loading of a website, and then when the user points the mouse over, they get a better image. Great for sales sites etc.

If anyone can modify this, to make it work better, please let me know.

Knowledge required:
Basic HTML
Basic CSS

How to insert into your site.
Create a CSS sheet and embed the following, or make the HTML page read CSS from within itself.
Code: [Select]
* {
padding: 0;
margin:0;}

#imageresize {
background:#FFFFFF;
}

#imageresize a {
  float:left;
  width: 8em;
  padding: 5px 10px 5px 10px;
  background-image:url(smallimage.png);
  width:100px;
  height:100px;
}

#imageresize a:hover {
  padding-top: 10px;
  background-image:url(LARGEimage.png);
  width:200px;
  height:200px;
}

Right. Three things to point out.
where mine says "smallimage.png", replace for the correct small image.
where mine says "LARGEimage.png", replace for the correct large image.
Correctly edit the width and height for each image. Otherwise, it will be as my defaults Smiley


Now, to implement this into your site.
Where you want the image to be, just copy and paste this:

Code: [Select]
<div id="imageresize"><a></a></div>
That will make a reference to the CSS above, and make it hyperlinked to nothing, so you can change size.



I find this is better than rollover or navigation bars as created in Dreamweaver. They load the images to start with, whereas this method only loads them when needed.

I am still learning CSS and have a good knowledge of HTML. SO, like i said before, If you can help, please advise me... this is very neat effects, and i like what can be done!