JQuery Image Zoom on Hover?

I am using table based layout to show 3 images in row. Image size is 100 x 100. I want to increase image size 150 x 150 on hover. How to do it using jQuery? I tried CSS approach it did not work.

#rightImage
{
    height:100px;
    float:left;
    position:relative;
   
}
#rightImage:hover img
{
    height: 150px;
    width: 150px;
    z-index:1;
 
}

HTML:

It works in Chrome but IE9 ignores this completely. What is the right way to zoom image, CSS or jQuery? Please suggest..

 

Hi there,
out there are many jquery scripts which let's you zoom images from thumbnails to large one. Read this article I found this helpful.
softstribe.com/top-lists/top-10-outstanding-image-zooming-jquery-scripts

 

greatlogix, did you find a solution or do you still need assistance?

 

Still looking for solution. Any help?

 

Do you want the image to push stuff around it to expand or to overlap on expand?
How is this solution?
http://www.jacklmoore.com/zoom

 

I am using this on a table grid. 3 images per row. It should overlap on expand.

 

greatlogiz,

What about something like this?
http://jsfiddle.net/kVH2L/

 

First of all add image to page and assign it an id in css as u did in above code... Then simply add jquery file hope you have or download it from jquery website...........then add it to file and write following code in the javascript tage.......
Here is mypic is the assign id of of picture in "<image id=mypic " like this.......

$("#mypic").mouseover(function() {
$("#mypic").css('height','150');
$("#mypic").css('width','150');
});

Code (markup):

Hope you get your solution......

 

AGAIN, why the blue blazes would you use Javascript for this, much less that fat bloated jquery asshattery? ANOTHER example of "Js for nothing and your scripts for free, that ain't working, that's NOT how you do it!"

Question, is #rightImage the actual IMG tag? or is the IMG tag INSIDE #rightImage. Your CSS doesn't make a whole lot of sense... but then CSS without the markup it is applied to is ALWAYS gibberish!

Assuming #rightImage is a div around the IMG tag (which I'd do rather than playing with unreliable relative positioning and assuming you don't want the whole layout hopping around like a mexican jumping bean):

<div id="rightImage"><img src="images/test.png" alt="test image" /></div>

Code (markup):

This should work like a charm:

#rightImage {
	position:relative;
}

#rightImage,
#rightImage img {
	width:100px;
	height:100px;
}

#rightImage img {
	position:absolute;
	top:0;
	left:0;
	-webkit-transition:width 0.5s, height 0.5s, left 0.5s, top 0.5s;
	-moz-transition:width 0.5s, height 0.5s, left 0.5s, top 0.5s;
	-o-transition:width 0.5s, height 0.5s, left 0.5s, top 0.5s;
	transition:width 0.5s, height 0.5s, left 0.5s, top 0.5s;
}

#rightImage img:hover {
	top:-25px;
	left:-25px;
	width:150px;
	height:150px;
}

Code (markup):

Don't go diving for some fat bloated javascripted nonsense just because you're CSS is wrong.

(oh, and I tossed a transition on there to make it 'pretty' in modern browsers)

 

Thanks @deathshadow Your code is working perfectly. Just one problem. In IE10 hover image gets beneath the right side image. How to fix it?

Edit: In IE9 it's shaking terribly. Any fix for IE9?

 

Try adding z-index:999 to the hover state, that SHOULD do the trick -- if not you may have to add a hover state to the image's parent setting same.

 

Yes i already tried z-index:999. It did not work. Can you please share css for IE10 & IE9 fix?

 

Wait, what you mean "get's beneath the right side image"?!? Not sure what that means.

I'd have to see what else you have on the page to see how it's interacting with the other elements.

 

See the attached image. This is what i get in IE10. In IE9 it bounces in and out and the whole page king of bounces along with it.

 

Uhm.... are all those images getting the same ID or something? #rightImage would be wrong if they are all getting that.

In any case, IF those are all getting the same styling (and as such should be targeted by class)... change all those # to . and then

.rightImage {
  position:relative;
  z-index:1;
}

.rightImage:hover {
  z-index:99;
}

Code (markup):

that's assuming they ALL are getting that styling... the other ones are either absolute positioned or relative positioned, so they're depth sorting in source code order. You need to set them all to z-index:1, and then on hover change the wrapping div so it sorts over them.

I'm away from my workstation at the moment (on a tablet) but when I'm back at the big rig I'll toss together a working demo and make sure that a whole 'series' of them will depth-sort over each-other properly for you.

 

Here's what I came up with for a test:
http://www.cutcodedown.com/for_others/greatlogix/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/greatlogix/

is wide open for easy access to the bits and pieces. Works perfect all modern browsers and IE 10... Also works in IE 9 down to IE6 though naturally without the transition animations.

Having seen your picture the markup got changed around because it makes more sense this way if they're going to have associated text, just make the whole thing one big anchor and apo based off that, using some top padding to make room for the image in it's "normal" state.

 

Hey deathshadow,

First of all bundle of thanks for your time and kindness to solve my problem.

I am not able to access site. Nod32 is showing this in popup
Threat Found: JS/Iframe.HH torjan.

 

I don't believe it, my host is hacked again, and this time there is NOTHING on that domain that should even be HACKABLE...

That's it, next month if I can afford it or not I'm going back to dedicated hosting. Gimme an hour to wipe that account clean, rotate the passwords and I'll upload a fresh copy.

AGAIN. NEVER had these problems when I was on a dedicated. **** shared hosting or VPS, it's just not worth it. (I was on VPS for six months, shared now for about 11 months -- it's been NOTHING but a nightmare)

 

Alright, working again -- though Christmas only knows for how long.

 

Thanks again. It's working perfectly.