1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Please help, 3 hours and nothing!

Discussion in 'HTML & JavaScript' started by dragonlube, Jan 29, 2011.

  1. dragonlube

    dragonlube Regular Member

    Joined:
    Jan 22, 2011
    Messages:
    420
    Likes Received:
    113
    Location:
    Behind the bushes
    Ive been trying to have this code enlarge an image when I roll over it but I cant get it to not push down the image below it when the picture above it is rolled over and enlarged, also I wanted to have the pictured that gets enlarged to go over any other content around it without disturbing it.

    Tried a number of ways for about 3 hours now but just cant get it right.

    wouldnt let me put URLs so the image source is empty





    Code:
    
    
    
    <html>
    <head>
    <style type="text/css">
    
    div.img 
    {
    
    height: auto;
    width: auto;
    position: absolute;
    
    
    }	
    
    div.img a:hover img {
    
    
    width: 420px;
    height: 350px;
    position: relative;
    
    
    </style>
    </head>
    <body>
    
    
    <div class="img">
    <a target="_blank" href="klematis2_big.htm">
    <img src="" alt="Klematis" width="110" height="90" 
    </div>
    
    
    <div class="img">
    <a target="_blank" href="klematis2_big.htm">
    <img src="" alt="Klematis" width="110" height="90" 
    
    </div>
    
    
    </div>
    
    </body>
    </html>
    
    
    thanks
     
  2. 195471

    195471 Regular Member

    Joined:
    Oct 11, 2008
    Messages:
    417
    Likes Received:
    260
    If you don't want one image to push down the other image when it gets enlarged, you need to use z-index in your CSS. There's a demo (URL below) that I think does what you're looking to do, but the images are displayed horizontally, as opposed to vertically. I'm sure you can adapt it to your own needs, though. Also, keep in mind that if you're going to use z-index, this only works with absolute, relative, or fixed positioning. If you don't define a particular CSS element's position as such, z-index will have no effect.

    Code:
    http://www.cssplay.co.uk/menu/magnify.html
     
    • Thanks Thanks x 1
  3. DutchBeardMan

    DutchBeardMan Registered Member

    Joined:
    Jan 26, 2011
    Messages:
    52
    Likes Received:
    4
    Location:
    The Netherlands
    I was searching for the very same thing, thnx 195471
     
    • Thanks Thanks x 1
  4. dragonlube

    dragonlube Regular Member

    Joined:
    Jan 22, 2011
    Messages:
    420
    Likes Received:
    113
    Location:
    Behind the bushes
    thanks for the reply although I cant seem to single out the code in the page, is it JS?

    thanks
     
  5. GreyWolf

    GreyWolf Executive VIP Jr. VIP

    Joined:
    Aug 17, 2009
    Messages:
    1,930
    Likes Received:
    5,389
    Gender:
    Male
    Occupation:
    Artist / Craftsman
    Location:
    sitting at my PC
    Here's a couple posts in another thread (What are they using on this site to do this?) about how to do the same thing.
    Post 2468798
    How to expand image on mouseover with just css. Expanded image will be relative to position of thumbnail. It isn't as cool as the other version that uses javascript too, but since it just uses css it's a little more basic a solution. This is from the cssplay website that 195471 referenced, but I posted the actual code in the reply. You can adjust the size and location of the expanded image by changing the a.magnify b definition.

    Post 2470699
    How to expand image on mouseover with css and javascript. Expanded image is relative to postition of mouse cursor. You'll have to grab the code off another site, but it has a much better effect than using just css. You can adjust the size and location of the expanded image by changing the code in the skins.js file.​

    Hope that helps. ~Wolf
     
    Last edited: Jan 29, 2011