{"id":77,"date":"2020-01-28T09:42:24","date_gmt":"2020-01-28T09:42:24","guid":{"rendered":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/image-effects\/image-magnifier\/"},"modified":"2020-11-16T14:21:23","modified_gmt":"2020-11-16T14:21:23","slug":"image-magnifier","status":"publish","type":"docs","link":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/image-effects\/image-magnifier\/","title":{"rendered":"Image Magnifier"},"content":{"rendered":"

Image Magnifier<\/h1>\n
\n

Image Magnifier is a simple, smooth, responsive image zoom element that provides two modes to magnify or zoom in on an image. It is perfect for your eCommerce or real estate online store. Here, in this tutorial, you’ll know about this effect element and see how it works within image hover. Now, let’s dive into it:<\/strong><\/em><\/p>\n

\"\"<\/a><\/p>\n

\u21d2See Demo\u21d0<\/a><\/h1>\n
\n

<\/h2>\n

Creating a New Image Hover with Image Magnifier<\/h2>\n

First, navigate Image Hover> Image Hover> Elements> Image Magnifier <\/strong>from your dashboard.<\/p>\n

Then, create a new Image Hover style with Image Magnifier effects by clicking on the Create Style button like below<\/p>\n

\"\"<\/a><\/p>\n

See the Using Image Hover<\/a> section to know how to add and edit an image hover item.<\/strong><\/em><\/p>\n

 <\/p>\n

Customizing & Adding Data<\/h2>\n

Now, after you create a new Image Hover using Image Magnifier Effects it’s time to go further and add\/style data to your style. Let’s start this section:<\/p>\n

 <\/p>\n

Add\/Edit New Image Hover<\/h3>\n

To add a new Image Magnifier hover item, click on the Add New Magnifier (+)<\/strong> button. After clicking that button, you’ll find a Hover Modification Form to upload the magnifier image and add info.<\/p>\n

\"\"<\/a><\/p>\n

After selecting a layout and creating a magnifier image item, you can see the live preview at the bottom side of the editor page.<\/p>\n

Now, when you hover over the image you’ll find an Edit<\/strong> icon in the image. See the image below,<\/p>\n

\"\"<\/a><\/p>\n

By selecting the Edit<\/strong> icon, you’ll find the image hover modification form. Here you can edit the image hover in image magnifier effects.<\/p>\n

 <\/p>\n

General Settings<\/h3>\n

\u039eGeneral Style-<\/span> In the first section of the General Settings area, you can customize the columns and measurements of the image magnifier. You can define the number of columns you want to display in a single row and set the border type and box-shadow.<\/p>\n

\u039eImage Settings-<\/span> Customize the image settings here. Set the main image position, height, width; control the opacity and enable\/disable the grayscale mode.<\/p>\n

\u039eMagnify Settings-<\/span> In this section, you can set the image in magnifying settings like adjusting the zoom level and set the custom width height.<\/p>\n

<\/h3>\n

Custom CSS Option<\/h3>\n

Here you’ll find a box where you can add your custom CSS code. Advanced developers can use this option for their convenience. After entering the codes, developers can see the live preview. Once you finish coding hit the “Save” button to make your changes.<\/p>\n

\"\"<\/a><\/p>\n

Now, just Copy the Shortcode and Paste anywhere in the post or page or plugins where you want to show the Image Magnifier.<\/strong><\/em><\/p>\n

\n

\n","protected":false},"featured_media":0,"parent":52,"menu_order":5,"template":"","doc_tag":[],"class_list":["post-77","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/types\/docs"}],"version-history":[{"count":5,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/77\/revisions"}],"predecessor-version":[{"id":2733,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/77\/revisions\/2733"}],"up":[{"embeddable":true,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/52"}],"wp:attachment":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/doc_tag?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}