Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7

Thread: magnify image

  1. #1
    Junior Member
    Join Date
    Aug 2007
    Posts
    9
    Member #
    15621
    how is it to magnify image when the mouse is over the image? exactly like this...
    http://www.cssplay.co.uk/menu/magnify.html

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    A view source should give you that information. Basically, you make the large image a child of an a element that contains the small image. However, you position the large image absolutely and set its display to none. Then, you use the a:hover selector combined with the descendant selector (so something like [minicode]a:hover div.large[/minicode]) to set the display to block.

  4. #3
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Yup. (cssplay was pretty cool back in the day... still is I guess!)

    http://www.netzgesta.de/cvi/ -- look for the "lupe" option, another crazy magnification scheme
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  5. #4
    Junior Member
    Join Date
    Aug 2007
    Posts
    9
    Member #
    15621
    the code is too long do you guys which part is the important ones?

  6. #5
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    wow straight up cool site

    that's all just js?? alot of the js offered, you could just edit your image before uploading though .. so it would decrease the size and complexity of your site, correct?

  7. #6
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    HTML Code:
    <a class="hoverImg" href="#" onclick="return false;">
    <img src="pic.jpg" height="24" width="24" />
    <img class="large" src="pic.jpg" height="128" width="128" />
    </a>
    CSS:
    Code:
    a.hoverImg img.large
    {
    display: none;
    }
    a.hoverImg:hover img.large
    {
    position: absolute;
    display: block;
    top:100px
    left: 100px;
    }
    That's just an example.
    Hyperair

  8. #7
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Quote Originally Posted by kade119
    wow straight up cool site

    that's all just js?? alot of the js offered, you could just edit your image before uploading though .. so it would decrease the size and complexity of your site, correct?
    You would think. In some cases, yes. However some of the functionality there is only best done with JS, and you gotta admit, it's a lot more flexible and convenient.
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com