How to make a image get bigger when you hover over it without it being Pixelated

Want a script to make when i hover over some images it gets bigger then when i move the pointer it goes back to normal size without getting pixelated

 

Hi

You will have to use a larger version of the image and make it appear smaller on the page. Then on the mouse over set it to the original size. that way it won't be pixelated.

to change the image's size use css

 .someclassname {
   width:70%;
 }
  
 .someclassname:hover {
   width:100%;
 }

Code (markup):

 

thanks much will definitely try it

 

You either start with a larger image in the first place (1 image file) OR you can switch to the larger version of the image when you are zooming in (2 image files).

 

Having two image files is unnecessary if you can just shrink the larger one. It's a waste of bandwidth and time if the browser has to download both images. shrinking an image has no loss of quality so it's fine to just have the larger one.

 

That depends on the context. If the zoomed image is very large and users won't always be zooming then the thumbnail saves bandwidth and streamlines the page. If the zoomed in image is not very large and/or the zoom is always used then you are definitely right.

 

Ok I agree with that.

 

you can do hover with php. use javascript or css.