1. Start
  2. How to Install
  3. How To Use

Royal Image Hover Effect Pro


Royal Image Hover effects Wordpress Plugin


Royal Image Hover Effects is an impressive, lightweight, responsive Image hover effects. Fully powered by pure CSS3. Apply Royal Image hover effects on your website without any CSS coding knowledge.

 

How to Install


Download Royal Image Hover effects plugin you will Get plugin after your payment Completed, The plugin Named like "Royal-image-hover-effects-pro.zip"

Go to Your wordpress dashboard >> Click Plugins >> Add New >> click Upload >> click Browse >> just seclect Plugin file "Royal-Image-hover-effects-pro.zip" >> Click Install

Open Installable Folder and you will get "Royal Image-hover-effects-pro.zip"

just Install This File to your Wordpress Site.

Remember that :

Before install Royal Image hover effects pro version please Delete Royal Image Hover Effect free version first. i hope you can install.

See Video Tutorial How to Install Free Version To Pro Version: Click Here



Another way to Install Wordpress Plugins:

Installation of Royal Image Hover Effect is very simple.

Option 1

How To Use


When you go to your Wordpress Dashboard you will see a new custom post named Royal hov Effects in your left toolbar under pages. This will allow you to quickly create Royal Image hover Effect item on your site.

To create an Royal Image Hover item all you need is the URL of the image. The image can come from any source and be any size, you can also use images uploaded right from the Post Media Uploader. Just copy the URL of the image after you upload it

Using the Royal Image Hover Effect Plugin

Once you see custom post name Royal hov Effects On your Dashboard left under pages. just click Add New Item :

You will see the Hover information option panel "Style 1" Click CheckBox Style 1. After Click Style 1, Then All Setting Option Panel Will be Visible Below

After Click "Style 1" Just Select "Style 1" in right sidebar Option

If you Chose "Style 2" Then Select "Style2" to Right Sidebar

There is 3 option Setting panel Area.




1. ROYAL HOVER ITEM

:

There are 3 field in this section:

First field: "Hover Image" Click to choose a file, the image can come from any source and be any size, you can also use images uploaded right from the post media uploader. Just copy the URL of the image after you upload it.

Second field: "Heading" You can enter any title, the important thing to remember is that the item width and height is limit so please enter short title. This is important to maintain the layout of the image wrapper.

Third field "Description" You can quickly insert the description in the description text area. It is important to enter a short description to maintain the layout of the image wrapper.

After all of the steps above are done you will see a Menu named Add more Royal Image hover item. If you want to add more items just click Add more Royal Image hover item and you will see another field open; you can then add unlimited items.




2. Style 1 Settings panel

:

There are Lot of field in this section, All Hover Field Explaining Below:

Hover Animation : There are 4 type of Hover Animation,

You can chose any type of animation for your Hover Item


Hover item Layout : There are 2 type of Hover Layout,

You can chose any One for your Hover Item

Show Circle Border : This Option Working Only for Circle Effects. If you want to make Border For Circle Item Then Kist Check "Show" .


Display Show item : This Option Allow to chose how many item showing in 1 row. This Option Is for Resize your Images with Different Size

There are 5 size you can set with Bootstrap Responsive Gird.

-- >>> If you use “Display Hover item in 1 row – “4”  Your Hover Item Will Show Like Below


Then your image size height and width is going Bootstrap col-md-3 gird size.



-- >>> If you use “Display Hover item in 1 row – “3”  Your Hover Item Will Show Like Below



-- >>> If you use “Display Hover item in 1 row – “2”  Your Hover Item Will Show Like Below



-- >>> if you use display hover item in 1 row – “1”  then your image size going big full width of page.

Select Hover Style: There are 11 unique Hover Style . Chose one which you like



Background Color : You May Change Hover Item Background Color with this option.

Remember : There Are Two Type of color You can Change

transparent Color:
Hexadecimal color:
If you want To use Transparent Color.
Just Chose Color And make It transparent, just right arrow Should be Scroll Down As you want to Transparent Opacity. see Screenshot Below:




Hexadecimal color:
If you want To use Hexadecimal Color. just right arrow Should be stay top
Just Chose Color And make It Hexadecimal. see Screenshot Below:



-------

Title Font Size: This Option Give you chose custom font size for Title Only

Title Color: This Option Give you chose custom font Color for Title Only

--------------
-----------------

Description Font Size: This Option Give you chose custom font size for Description Only

Description Color: This Option Give you chose custom font Color for Description Only

Custom CSS : This Option Give you change your custom CSS Code, If you want to change anything in CSS, you don't need to edot CSS file in your plugin. Just paste CSS code Here And Click updfate


3. Style 1 Social Icon Settings

:

Select First Icon: Chose First Icon Here. There Have Tons Of Font Awqesome Icon. You can chose any one.

First Icon Link: Paste A link for your First ICON. Ex: http://google.com

First Icon Color: Chose a color for your First hover Icon. When it hover.

Same Thing Just Chose Sencon Icon And Third icon


If you Don't want Social Icon. You want LINK replace with Social Icon

1. Just Dost use Social Icon. Click "x" In social Icon First.

2. Paste This Code In Below Description

Read More

Now Final Step

Create Royal Hover Item Category

Royal Hover Effects Category Name : "In right Side You can see a name like 'Royal Hov Category' . Just click Add New Category then make a category Name Then Click Add New Category . Your Category Will be add.

Royal hover Effects Shortcode : "In right Side You can see a name like 'Royal Shortcode Here' .

Just put the Category Name Here which previously created. Your Category Will be add automatically below in 'Royal hover Effects Shortcode'.. Just Copy shortcode And Paste Anywhere post or page or Widgets where we want to show Hover Item..

Now Go to Post/ Page

Click Add New Page

Just Paste This Shortcode Which You Copied.

[vbs_style1 category=" finaltest" ]




And See the Magic of All Royal Image Hover Effect, Enjoy!