{"id":5298,"date":"2024-04-14T22:16:19","date_gmt":"2024-04-14T14:16:19","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5298"},"modified":"2024-04-14T22:16:19","modified_gmt":"2024-04-14T14:16:19","slug":"enlarge-image-on-hover","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/enlarge-image-on-hover\/","title":{"rendered":"Enlarge Image on Hover"},"content":{"rendered":"\n
\n

You may have images in your website that are rich in intricate details \u2014 such as product photos or artwork. By using some custom code, you can enable your visitors to hover over and amplify specific parts of these images \u2014 all without having to move a muscle.\u00a0<\/p>\n

\n
\"An<\/div>\n<\/figure>\n

This tutorial will guide you through the process of enlarging your images by inserting custom code into a page or a project by following these steps:\u00a0<\/p>\n

    \n
  1. Insert the custom code<\/li>\n
  2. Assign a class name<\/li>\n
  3. Customize the magnifier<\/li>\n<\/ol>\n
    \n
    \n
    \n<script type=\"text\/javascript\" src=\"https:\/\/assets.website-files.com\/5e2755779d8b8ea1d6373797\/5ea88e92dce9b4b66f165490_zoom.txt\"><\/script>\n<script>\n  jQuery(function(){\n\n  if(!$.fn.imagezoomsl){\n\n      $('.msg').show();\n      return;\n    }\n    else $('.msg').hide();\n\n    \/\/ plugin initialization\n    $('.image').imagezoomsl({\n\n      innerzoommagnifier: true,\n      classmagnifier: \"round-loope\",\n      magnifiersize: [150, 150],\n      \/\/ disables the scrolling of the document with the mouse wheel when the cursor is over the image\n      disablewheel: false\n    });\n  });\n<\/script>\n    <\/code><\/pre>\n<\/div>\n<\/div>\n
    Insert the custom code<\/h2>\n
    There are two methods to insert the custom code into your project:\u00a0<\/p>\n
      \n
    • Include the code in the entire project<\/li>\n
    • Integrate the code in an individual page<\/li>\n<\/ul>\n
      To insert the code into your entire project:<\/p>\n
        \n
      1. Access your project\u2019s Settings<\/strong><\/li>\n
      2. Select the Custom code<\/strong> tab<\/li>\n
      3. Insert the code into the Footer code<\/strong> section (e.g., \u201cBefore <\/body> tag\u201d)<\/li>\n
      4. Click Save changes<\/strong><\/li>\n<\/ol>\n
        Note: <\/strong>You can insert the code into your project using hotkeys Command + V<\/strong> (on Mac) or Control + V<\/strong> (on Windows).<\/p><\/blockquote>\n
        \n
        \"The<\/div>\n<\/figure>\n
        \n
        \"The<\/div>\n<\/figure>\n
        To insert the code into an individual page:\u00a0<\/p>\n
          \n
        1. Launch the Designer<\/strong><\/li>\n
        2. Access the Pages panel<\/strong> and select the page settings cog icon of the desired page<\/li>\n
        3. Scroll to the Custom code<\/strong> section within the page settings<\/li>\n
        4. Insert the code into the Before <\/body> tag<\/strong> section<\/li>\n
        5. Click Save<\/strong><\/li>\n<\/ol>\n
          Note: <\/strong>You can paste the code into your project using hotkeys Command + V<\/strong> (on Mac) or Control + V<\/strong> (on Windows).<\/p><\/blockquote>\n
          \n
          \"To<\/div>\n<\/figure>\n
          \n
          \"A<\/div>\n<\/figure>\n
          You have successfully integrated the custom code into your project!<\/p>\n
          Assign a class name<\/h2>\n
          Let\u2019s assign a unique class name to the images that we want to apply the magnification effect to:<\/p>\n
            \n
          1. Select the Image<\/strong> you wish to magnify<\/li>\n
          2. Access the Style panel<\/strong> and click on the Selector field<\/strong><\/li>\n
          3. Give it a class<\/strong> (e.g., \u201cMagnify\u201d)\u00a0<\/li>\n<\/ol>\n
            \n
            \"The<\/div>\n<\/figure>\n
            Let\u2019s include the \u201cMagnify\u201d class in our code:\u00a0<\/p>\n
              \n
            1. Access the Pages panel<\/strong> and select the page settings cog icon of the page where your custom magnifier code is placed<\/li>\n
            2. Scroll to the Before <\/body> tag<\/strong> section in your page\u2019s settings<\/li>\n
            3. Replace \u201c.image<\/strong>\u201d with your class name (e.g., \u201c.magnify<\/strong>\u201d)\u00a0<\/li>\n
            4. Click Save<\/strong><\/li>\n<\/ol>\n
              \n
              \n
              \n
              \n        \"After\n    <\/div>\n<\/figure>\n
              \n    Helpful tip: <\/strong>Instead of replicating or copying classes in an ongoing project, consider using a Global class<\/strong> or a Combo class<\/strong> to establish a unique class for images intended for magnification. Ensure that the distinct magnification class name has been included in your custom code according to the previously outlined steps. Discover more about Global classes and Combo classes.\n<\/p><\/blockquote>\n
              Go ahead and publish your project and navigate to your live site to witness your personalized code in operation. Simply hover over the image where you’ve applied the class name (such as images identified with the class name \u201cMagnify\u201d), and observe a magnifying glass tracking your cursor movements as you glide it across the image.<\/p>\n
              Customize the magnifying tool<\/h2>\n
              By default, the magnifying glass is a square measuring 150 by 150 pixels. Let\u2019s modify its dimensions, shape, and introduce a drop shadow effect.<\/p>\n
              The default setting in our custom code specifies the magnifier size as 150 by 150 pixels. Let\u2019s enlarge it:<\/p>\n
                \n
              1. Access the Pages panel<\/strong> and select the page settings cog icon on the page containing your tailored magnifying code.<\/li>\n
              2. Scroll down to the Before <\/body> tag<\/strong> section within your page settings and pinpoint the “magnifiersize: [150, 150]” snippet of code.<\/li>\n
              3. Adjust both 150 pixel values to a larger figure (e.g., 300 pixels for each).<\/li>\n
              4. Save your changes.<\/li>\n<\/ol>\n
                \n
                \n        \"To\n    <\/div>\n<\/figure>\n
                Let\u2019s transform the magnifier shape from a square to a circle by setting a foundational style on a fresh Div block<\/strong>:<\/p>\n
                  \n
                1. Open the Navigator<\/strong> and choose the Body<\/strong> element.<\/li>\n
                2. Utilize Quick find<\/strong> to insert a Div block<\/strong> as the concluding element on the page.<\/li>\n
                3. Select the Div block<\/strong>, launch the Style panel<\/strong>, and click into the Selector field<\/strong>.<\/li>\n
                4. Assign a class name to the Div block<\/strong> to enable the custom code to recognize the new magnifier shape (e.g., \u201cround-loope\u201d).<\/li>\n
                5. Access Style panel<\/strong> > Borders<\/strong> and define a Radius<\/strong> of 50%.<\/li>\n<\/ol>\n
                  At this stage, the Div block might appear oval, but the magnifier’s size is controlled by the 300 pixels you previously set.<\/p>\n
                  \n    Insider tip: <\/strong>Press Command<\/strong> + E<\/strong> (on Mac) or Control<\/strong> + E<\/strong> (on Windows) to trigger Quick find<\/strong> and promptly append elements to your project.\n<\/p><\/blockquote>\n
                  \n
                  \n        \"The\n    <\/div>\n<\/figure>\n
                  \n
                  \n        \"The\n    <\/div>\n<\/figure>\n
                  To introduce more depth to the magnifier, let\u2019s include a shadow behind it:<\/p>\n
                    \n
                  1. Choose the Div block<\/strong>.<\/li>\n
                  2. Access the Style panel<\/strong> > Effects<\/strong>.<\/li>\n
                  3. Incorporate a Box shadow<\/strong> by selecting the plus icon and customize the shadow according to your preference.<\/li>\n<\/ol>\n
                    Since our \u201cround-loope\u201d Div block<\/strong> solely affects the styling of our magnifier, we do not want the Div block<\/strong> to be visible on our page. Let\u2019s conceal it from view:<\/p>\n
                      \n
                    1. Select the \u201cround-loope\u201d Div block<\/strong>.<\/li>\n
                    2. Open the Style panel<\/strong> > Layout<\/strong>.<\/li>\n
                    3. Adjust the Display<\/strong> to none<\/strong>.<\/li>\n
                    4. Publish<\/strong> the project and explore your site to preview the newly styled magnifier.<\/li>\n<\/ol>\n
                      \n
                      \n        \"An\n    <\/div>\n<\/figure>\n
                      The magnifying tool also functions on mobile gadgets. Users can tap on the image to view close-ups, especially on devices like tablets and smartphones.<\/p>\n
                      \n
                      \n        \"An\n    <\/div>\n<\/figure>\n
                      Congratulations! You\u2019ve enhanced the potential of your images with magnification capabilities!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Add a desktop and mobile-friendly magnifier for images on mouse hover using custom code.","protected":false},"author":2,"featured_media":5299,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5298","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5298"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5298\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5299"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}