Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Image tooltip - zoom on hover

    So I've made an image tooltip. On hover the image darkens and a bigger version of the same iamge appears; I've used 2 separeted images for this - 1 small and 1 big. But not always I'll be able to make a bigger version of the image (using paint or whatever) so that's why I need to ZOOM the current small image. How to achieve this?
    Also here's my code:
    Code:
    <!DOCTYPE html>
    <html dir="ltr" lang="en-us" itemscope="itemscope" itemtype="http://schema.org/WebPage">
    <head>
    <style type="text/css">
    /* Begin Image ToolTip Code */
        .thumbnail-item {
            /* position relative so that we can use position absolute for the tooltip */
            position: relative;
            float: left;
            margin: 0px 5px;
        }
        .thumbnail-item a {
            display: block;
        }
        .thumbnail-item img.thumbnail {
            border:3px solid #ccc;    
        }
                
        .tooltip {
            /* by default, hide it */
            display: none;
            /* allow us to move the tooltip */
            position: absolute;
            /* align the image properly */
            padding: 8px 0 0 8px;
        }
            .tooltip span.overlay {
                /* The PNG Image, needs ie6 hack though */
                background: url(http://www.gameplay-universe.uphero.com/resources-backups/overlay.png) no-repeat;
                /* Put this Overlay on the top of the ToolTip Image */
                position: absolute;
                top: 0px;
                left: 0px;
                display: block;
                width: 350px;
                height: 200px;
            }
    /* Darken the Image when hovering */
    a.darkened-image {
        display: inline-block;
        background: black;
        padding: 0;
    }
    a.darkened-image img {
        display: block;
       
        -webkit-transition: all 0.5s linear;
           -moz-transition: all 0.5s linear;
            -ms-transition: all 0.5s linear;
             -o-transition: all 0.5s linear;
                transition: all 0.5s linear;
    }
    a.darkened-image:hover img {
        opacity: 0.7;
               
    }
    /* End Darkening */
    </style>
    <title>The Gameplay Universe &bull; Test</title>
    <noscript>Sorry, your browser does not support JavaScript!</noscript>
    </head>
    <body id="top" oncontextmenu="return false;">
    <script type="text/javascript">
        // Load this script once the document is ready
        $(document).ready(function () {
                
            // Get all the thumbnail
            $('div.thumbnail-item').mouseenter(function(e) {
                // Calculate the position of the image tooltip
                x = e.pageX - $(this).offset().left;
                y = e.pageY - $(this).offset().top;
                // Set the z-index of the current item,
                // make sure it's greater than the rest of thumbnail items
                // Set the position and display the image tooltip
                $(this).css('z-index','15')
                .children("div.tooltip")
                .css({'top': y + 10,'left': x + 20,'display':'block'});
                    
            }).mousemove(function(e) {
                    
                // Calculate the position of the image tooltip            
                x = e.pageX - $(this).offset().left;
                y = e.pageY - $(this).offset().top;
                    
                // This line causes the tooltip will follow the mouse pointer
                $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
                    
            }).mouseleave(function() {
                    
                // Reset the z-index and hide the image tooltip
                $(this).css('z-index','1')
                .children("div.tooltip")
                .animate({"opacity": "hide"}, "fast");
            });
        });
    </script>
    <div class="thumbnail-item">
    <a href="javascript:void(0);" class="darkened-image"><img src="http://www.gameplay-universe.uphero.com/resources-backups/tooltip-image-small.png" class="thumbnail" onmouseover="this.src='http://www.gameplay-universe.uphero.com/resources-backups/tooltip-image-small-2.png';" onmouseout="this.src='http://www.gameplay-universe.uphero.com/resources-backups/tooltip-image-small.png';" /></a>
    <div class="tooltip">
    <img src="http://www.gameplay-universe.uphero.com/resources-backups/tooltip-image-big.png" alt="" width="330" height="185" />
    <span class="overlay"></span>
    </div>
    </div>
    </body>
    </html>
    "overlay.png" is the image border that overlaps the actuall image.
    How should I edit the file above to get the hover effect zoom and not replace the image?

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Just set the width of the image on hover to a higher value and use a transition to animate the re-size. It makes an ugly effect even uglier, but if that is what you want keep it simple. You really don't need to do much with something that over-coded.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New Coder
    Join Date
    Apr 2013
    Location
    Germany
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by COBOLdinosaur View Post
    Just set the width of the image on hover to a higher value and use a transition to animate the re-size. It makes an ugly effect even uglier, but if that is what you want keep it simple. You really don't need to do much with something that over-coded.
    Could I have an example please?

  • #4
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Just add a new width and the transition to the image on hover. You might have to play with it a little if the jquery junk gets in the way, and it might get broken if you change display on the hove because the display property can't be animated.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •