Original Css3 Image Hover Effects

Description

Original Css3 Image Hover Effects Is Fully Responsive & Mobile Optimized Css3 Hover Effects for your wordpress site. This Plugin created using only pure CSS3 properties. No JavaScript. Easy to use the amazing Image Hover Effects for your website.

See live demo here: http://demo.codecans.com/plugins?theme=org-css-image-hov-effects

Video Tutorial:

Features

  • Fully Responsive & Mobile Optimized
  • Easy to use
  • No Javascript Pure CSS3
  • Chose Responsive Gird in Option Panel
  • Button link for each hover item
  • 12 Amazing hover effects
  • Control Display Item In 1 Row
  • Custom Circle Animation
  • 4 Different Images Size
  • Support Browser IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
  • Custom post enabled
  • Category Support
  • Custom ordering
  • Amazing option panel
  • Shortcode Powered
  • Unlimited hover items
  • Support Within 12 Hours

Pro Version Features

    Original Css3 Image Hover Effects Pro Version Features :

  • Fully Responsive & Mobile Optimized
  • Unlimited Color Option
  • Support Browser IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
  • Control Display Item In 1 Row
  • Custom Button Color
  • Custom Button Size
  • Chose Font Layout Style
  • Custom Font Size
  • Custom Font Color
  • Custom Css Panel Ready
  • 27 Unique Hover Effects
  • Customize Background Color For Each Style
  • 500+Google Font Support
  • Unlimited Hover Items
  • External link for each hover item
  • Chose Responsive Gird in Option Panel
  • Control Margin/ space Between Two Items
  • Open link in new tab
  • Support within 12 hours
  • Single Site License
  • Developer License (unlimited use)

Screenshots

  • Adding Original Css3 Image hover item.
  • Upload Image, Write Title, Description, in Custom Post.
  • Adding More Hover Items.
  • Adding Category.
  • Opening Setting Panel.
  • Working With Setting Panel.
  • Live View.

Installation

Installation of Original Css3 Image Hover Effects is very simple.

Installation of Original Css3 Image Hover Effects is very simple.

Option 1

  • Download the plugin Original-css3-image-hover-effects.zip from download location.
  • Unpack the *.zip file and extract the Original Css3 Image Hover Effects folder.
  • Drop the Original Css3 Image Hover Effects plugin folder into your wp-content/plugins folder.
  • In word press administration panels, click on Plugins from the menu.
  • You should see your plug-in listed under Inactive plug-in tab.
  • To turn the word presses plug-in on, click activate.
  • Option 2

  • Download the plugin Original Css3 Image Hover Effects Plugin from download location.
  • Go to Add New menu under Plugins tab in your word-press admin.
  • Select upload link (top link menu).
  • Upload the available RD Hover Effects Plugin file and click install now
  • Finally click activate plug-in link to activate the plug-in.
  • Settings Page

    Under Settings -> Original Css3 Image Hover Effects you can configure the basic settings. Everything else can be done on the fly via Custom post named Orgin Hov Effects on your Dashboard and via the Shortcode option on any Page or Post that you want.

    Add Original Css3 Image Hover Effects- Allows you to add hover feature to Custom Posts as well as add information such as: Title, Description, Image, Button name and Button Link in the Original Css3 Image Hover Effects custom post.

    Item Position – You can select which Hover item you want to appear first. You can also select all of your items and drag to move the order of each up and down in the Custom Post Panel.

    Category – Choose the Category as you want to use for your Original hover effects.

    How To Use

    When you go to your WordPress Dashboard you will now see a new custom post named Orgin hov Effect in your left toolbar under

    pages. This will allow you to quickly create Original Css3 Image Hover Effects item on your site.

    To create an Original Css3 Image Hover Effects 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

    Another important thing to remember is that the image must always have its width and height set. This is important to maintain the layout of the image wrapper; your site, and to make sure the hover functions properly. Luckily, when using the plugin it will attempt to get these values for you.

     

    Using the Original Css3 Image Hover Effects Plugin

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

    You will see the Hover information option panel with Field 5

    First field: “Upload 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: “Enter Your Title” 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 “Enter Your 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.

    Fourth Field: “Enter Button Name” This is the name of the button in your hover item. The name should be ex: ‘Read more’ or ‘View More’, or anything as you want but remember to keep the button name short.

    Five Field : “Enter button URL” Chose a button URL in this field. EX :

    http://codecans.com

    Note: Remember that you have to add a button URL.

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

    When Original Hover item Created with category support done, we have to add shortCode on post or page where we want to show.

    Go to Dashboard, Click Ad New Post or page.

    In your Post/Page Editor you will see a blue button within your editor.

    Put Any Title On Title field, click the Orginal Css3 Hover Shortcode Button, you will then see a Box open with a ShortCode Option Panel.

    In the Shortcode Option Panel there are 3 fields.

    First Field : “Category Name” Put the same category name which you created before with Original Hover item. Please remember that the Category Name should be the same as your Hover Item Category.

    Second Field : “Select Hover Style” There are 12 unique amazing hover styles to choose from.

    Third Field : “Display Hover Item in 1 row” You can chose How much Item Show in 1 row.

    Click Insert Button and you will see a Shortcode in your post/page editor.

    EX:

    [[org_hover category="orginalhover" style="style1" orginal_item_show="rd-gird-col-lg-4 rd-gird-col-md-4 rd-gird-col-sm-6 rd-gird-col-xs-12"]

    After All Above all just click publish

    And See the Magic of All Original Css3 Image Hover Effects, Enjoy!

    FAQ

    Installation Instructions

    Installation of Original Css3 Image Hover Effects is very simple.

    Installation of Original Css3 Image Hover Effects is very simple.

    Option 1

  • Download the plugin Original-css3-image-hover-effects.zip from download location.
  • Unpack the *.zip file and extract the Original Css3 Image Hover Effects folder.
  • Drop the Original Css3 Image Hover Effects plugin folder into your wp-content/plugins folder.
  • In word press administration panels, click on Plugins from the menu.
  • You should see your plug-in listed under Inactive plug-in tab.
  • To turn the word presses plug-in on, click activate.
  • Option 2

  • Download the plugin Original Css3 Image Hover Effects Plugin from download location.
  • Go to Add New menu under Plugins tab in your word-press admin.
  • Select upload link (top link menu).
  • Upload the available RD Hover Effects Plugin file and click install now
  • Finally click activate plug-in link to activate the plug-in.
  • Settings Page

    Under Settings -> Original Css3 Image Hover Effects you can configure the basic settings. Everything else can be done on the fly via Custom post named Orgin Hov Effects on your Dashboard and via the Shortcode option on any Page or Post that you want.

    Add Original Css3 Image Hover Effects- Allows you to add hover feature to Custom Posts as well as add information such as: Title, Description, Image, Button name and Button Link in the Original Css3 Image Hover Effects custom post.

    Item Position – You can select which Hover item you want to appear first. You can also select all of your items and drag to move the order of each up and down in the Custom Post Panel.

    Category – Choose the Category as you want to use for your Original hover effects.

    How To Use

    When you go to your WordPress Dashboard you will now see a new custom post named Orgin hov Effect in your left toolbar under

    pages. This will allow you to quickly create Original Css3 Image Hover Effects item on your site.

    To create an Original Css3 Image Hover Effects 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

    Another important thing to remember is that the image must always have its width and height set. This is important to maintain the layout of the image wrapper; your site, and to make sure the hover functions properly. Luckily, when using the plugin it will attempt to get these values for you.

     

    Using the Original Css3 Image Hover Effects Plugin

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

    You will see the Hover information option panel with Field 5

    First field: “Upload 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: “Enter Your Title” 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 “Enter Your 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.

    Fourth Field: “Enter Button Name” This is the name of the button in your hover item. The name should be ex: ‘Read more’ or ‘View More’, or anything as you want but remember to keep the button name short.

    Five Field : “Enter button URL” Chose a button URL in this field. EX :

    http://codecans.com

    Note: Remember that you have to add a button URL.

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

    When Original Hover item Created with category support done, we have to add shortCode on post or page where we want to show.

    Go to Dashboard, Click Ad New Post or page.

    In your Post/Page Editor you will see a blue button within your editor.

    Put Any Title On Title field, click the Orginal Css3 Hover Shortcode Button, you will then see a Box open with a ShortCode Option Panel.

    In the Shortcode Option Panel there are 3 fields.

    First Field : “Category Name” Put the same category name which you created before with Original Hover item. Please remember that the Category Name should be the same as your Hover Item Category.

    Second Field : “Select Hover Style” There are 12 unique amazing hover styles to choose from.

    Third Field : “Display Hover Item in 1 row” You can chose How much Item Show in 1 row.

    Click Insert Button and you will see a Shortcode in your post/page editor.

    EX:

    [[org_hover category="orginalhover" style="style1" orginal_item_show="rd-gird-col-lg-4 rd-gird-col-md-4 rd-gird-col-sm-6 rd-gird-col-xs-12"]

    After All Above all just click publish

    And See the Magic of All Original Css3 Image Hover Effects, Enjoy!

    Reviews

    Horrible plugin

    Lo primero que aparece al activarlo es la invitación a comprar la versión PRO.
    No respeta la filosofía de WP.
    He comprado otros plugins pero no si la version free es mala.

    Don't get this

    It’s not at all user friendly, and I have yet to find an option that doesn’t display giant text on your page saying you need to buy the pro version. This is just a scam.

    Garbage

    Simply useless! Doesn’t have any real options or FX – waste of time.

    Amazing great hover plugin

    This plugin works perfectly on my site both in desktop view and mobile view with beautiful and professional hover effect. It’s hard to find such a good plugin.

    Original Css3 Image Hover Effects

    Hi this is Fully Responsive amazing hover Effects plugin to your site.
    If you face any issue please don’t hesitate to contact us . we will solve your issue. 🙂
    Thanks

    Read all 5 reviews

    Contributors & Developers

    “Original Css3 Image Hover Effects” is open source software. The following people have contributed to this plugin.

    Changelog

    2.4.5

    • Fixed Responsive Issue
    • Fixed Hover Focus Issue

    2.4.4

    • Fixed Minor Issue

    2.4.3

    • Image Issue Solved
    • changed Demo Site

    2.4.2

    • fixed Minor issue
    • changed site URL

    2.4.1

    • fixed image height issue
    • Fixed CSS Error
    • Change Demo URL

    2.4.0

    • Fixed Backend Icon Issue
    • Fixed Minor Issue

    2.3

    • Fixed Responsive Issue

    2.2

    • Fix Minor Issue

    2.1

    • fixed bug
    • fixed Css Issue

    2

    • Added Pro Version
    • Added Full Functions

    1.1

    • Added Widgets Support

    1.0

    • Initial Release