{"id":87,"date":"2020-01-28T09:44:58","date_gmt":"2020-01-28T09:44:58","guid":{"rendered":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/using-image-hover\/editing\/"},"modified":"2020-11-16T13:42:41","modified_gmt":"2020-11-16T13:42:41","slug":"editing","status":"publish","type":"docs","link":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/using-image-hover\/editing\/","title":{"rendered":"Editing"},"content":{"rendered":"

After confirming the layout, you can finally start editing your image hover item. You can add your own images if you want to, or use our pre-built layout. It’s up to you!<\/strong><\/em><\/p>\n

 <\/p>\n

Here in this tutorial, you’re going to learn how to edit a pre-built layout and customize it in your own way. So let’s get started:<\/p>\n

 <\/p>\n

Edit the Image<\/h2>\n
\n

After selecting a layout and creating an image hover effect item, you can see the live preview at the bottom side of the editor page. When you hover over the image you’ll find an edit 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 customize the image.<\/p>\n

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

<\/h2>\n

General Settings<\/h2>\n
\n

After adding and customizing an image successfully here you can find the “General Settings” section along with 2 sub-sections. Now, let’s see how to edit this section:<\/p>\n

Column & Effects<\/h4>\n

Here in this sub-section, you can customize the column size, effects time, and animation.<\/p>\n

In the animation settings, you’ll find 5 different options. By using these options, you can select the animation type, set the duration and delay time, customize the offset, and enable\/disable the looping of the animation transition.<\/p>\n

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

General Style<\/h4>\n

The General Style setting covers the measurement options. You can customize the width, height, and margin of the image hover for different dimensions.<\/p>\n

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

<\/h2>\n

Typography<\/h2>\n
\n

When you are done with the general settings, here you’ll find the “Typography” section along with 2 sub-sections to customize the styles of contents and icons. Now, let’s see how to edit this section:<\/p>\n

 <\/p>\n

Content Settings<\/h4>\n

Here in this settings area, you can customize the background color of the image hover content, set the alignment, and set the border-radius, box-shadow, and padding for both normal and hover mode.<\/p>\n

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

In the background setting, you can choose either you want a color background or an image as the background. And in the box-shadow setting, you can customize the setting elaborately for getting a better version of the style.<\/p>\n

 <\/p>\n

Icon Settings<\/h4>\n

The icon settings area is for customizing the width, height, and size of the icon. You can also customize the background color and the icon’s color of the image hover content, set the border style, width, and customize the border-radius, box-shadow, and margin of both normal and hover mode.<\/p>\n

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

 <\/p>\n

Custom CSS Option<\/h2>\n
\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

 <\/p>\n","protected":false},"featured_media":0,"parent":83,"menu_order":3,"template":"","doc_tag":[],"class_list":["post-87","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/87","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":6,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/87\/revisions"}],"predecessor-version":[{"id":3511,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/87\/revisions\/3511"}],"up":[{"embeddable":true,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/83"}],"wp:attachment":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/doc_tag?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}