1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

JQuery Image Zoom on Hover?

Discussion in 'jQuery' started by greatlogix, Feb 22, 2013.

  1. #1
    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.
    HTML:
    1. #rightImage
    2. {
    3.     height:100px;
    4.     float:left;
    5.     position:relative;
    6.    
    7. }
    8. #rightImage:hover img
    9. {
    10.     height: 150px;
    11.     width: 150px;
    12.     z-index:1;
    13.  
    14. }
    It works in Chrome but IE9 ignores this completely. What is the right way to zoom image, CSS or jQuery? Please suggest..
    Solved! View solution.
    greatlogix, Feb 22, 2013 IP
  2. Muhammad Haroon

    Muhammad Haroon Greenhorn

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #2
    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
    Muhammad Haroon, Mar 4, 2013 IP
  3. Forbidd3n

    Forbidd3n Member

    Messages:
    261
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #3
    greatlogix, did you find a solution or do you still need assistance?
    Forbidd3n, Mar 6, 2013 IP
  4. greatlogix

    greatlogix Active Member

    Messages:
    660
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #4
    Still looking for solution. Any help?
    greatlogix, Mar 6, 2013 IP
  5. Forbidd3n

    Forbidd3n Member

    Messages:
    261
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #5
    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
    Forbidd3n, Mar 6, 2013 IP
  6. greatlogix

    greatlogix Active Member

    Messages:
    660
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #6
    I am using this on a table grid. 3 images per row. It should overlap on expand.
    greatlogix, Mar 6, 2013 IP
  7. Forbidd3n

    Forbidd3n Member

    Messages:
    261
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #7
    greatlogiz,

    What about something like this?
    http://jsfiddle.net/kVH2L/
    Forbidd3n, Mar 6, 2013 IP
  8. beven

    beven Member

    Messages:
    478
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    38
    #8
    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.......

    Code (Text):
    1. $("#mypic").mouseover(function() {
    2. $("#mypic").css('height','150');
    3. $("#mypic").css('width','150');
    4. });
    Hope you get your solution......
    beven, Mar 8, 2013 IP
  9. deathshadow

    deathshadow Prominent Member

    Messages:
    5,975
    Likes Received:
    824
    Best Answers:
    144
    Trophy Points:
    395
    #9
    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):

    Code (Text):
    1. <div id="rightImage"><img src="images/test.png" alt="test image" /></div>
    This should work like a charm:
    Code (Text):
    1. #rightImage {
    2.     position:relative;
    3. }
    4.  
    5. #rightImage,
    6. #rightImage img {
    7.     width:100px;
    8.     height:100px;
    9. }
    10.  
    11. #rightImage img {
    12.     position:absolute;
    13.     top:0;
    14.     left:0;
    15.     -webkit-transition:width 0.5s, height 0.5s, left 0.5s, top 0.5s;
    16.     -moz-transition:width 0.5s, height 0.5s, left 0.5s, top 0.5s;
    17.     -o-transition:width 0.5s, height 0.5s, left 0.5s, top 0.5s;
    18.     transition:width 0.5s, height 0.5s, left 0.5s, top 0.5s;
    19. }
    20.  
    21. #rightImage img:hover {
    22.     top:-25px;
    23.     left:-25px;
    24.     width:150px;
    25.     height:150px;
    26. }
    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)
    deathshadow, Mar 19, 2013 IP
    greatlogix likes this.
  10. greatlogix

    greatlogix Active Member

    Messages:
    660
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #10
    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?
    Last edited: Mar 20, 2013
    greatlogix, Mar 20, 2013 IP
  11. deathshadow

    deathshadow Prominent Member

    Messages:
    5,975
    Likes Received:
    824
    Best Answers:
    144
    Trophy Points:
    395
    #11
    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.
    deathshadow, Mar 20, 2013 IP
  12. greatlogix

    greatlogix Active Member

    Messages:
    660
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #12
    Yes i already tried z-index:999. It did not work. Can you please share css for IE10 & IE9 fix?
    greatlogix, Mar 20, 2013 IP
  13. deathshadow

    deathshadow Prominent Member

    Messages:
    5,975
    Likes Received:
    824
    Best Answers:
    144
    Trophy Points:
    395
    #13
    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.
    deathshadow, Mar 20, 2013 IP
  14. greatlogix

    greatlogix Active Member

    Messages:
    660
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #14
    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.

    Attached Files:

    greatlogix, Mar 20, 2013 IP
  15. deathshadow

    deathshadow Prominent Member

    Messages:
    5,975
    Likes Received:
    824
    Best Answers:
    144
    Trophy Points:
    395
    #15
    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

    Code (Text):
    1. .rightImage {
    2.   position:relative;
    3.   z-index:1;
    4. }
    5.  
    6. .rightImage:hover {
    7.   z-index:99;
    8. }
    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.
    deathshadow, Mar 20, 2013 IP
  16. #16
    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.
    deathshadow, Mar 21, 2013 IP
  17. greatlogix

    greatlogix Active Member

    Messages:
    660
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #17
    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.
    greatlogix, Mar 22, 2013 IP
  18. deathshadow

    deathshadow Prominent Member

    Messages:
    5,975
    Likes Received:
    824
    Best Answers:
    144
    Trophy Points:
    395
    #18
    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)
    Last edited: Mar 22, 2013
    deathshadow, Mar 22, 2013 IP
  19. deathshadow

    deathshadow Prominent Member

    Messages:
    5,975
    Likes Received:
    824
    Best Answers:
    144
    Trophy Points:
    395
    #19
    Alright, working again -- though Christmas only knows for how long.
    deathshadow, Mar 22, 2013 IP
  20. greatlogix

    greatlogix Active Member

    Messages:
    660
    Likes Received:
    13
    Best Answers:
    1
    Trophy Points:
    85
    #20
    Thanks again. It's working perfectly.
    greatlogix, Mar 25, 2013 IP