Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

RD Hover Effects: The Best Amazing Image Hover Effects Collection For Wordpress

RD Hover Effects provides you smooth and light weighted image hover effects with 3 style (square, Circle, Caption) & 92+ hover effects collection.

Live Demo | Documentation | Video tutorial | Support forum

Overview

RD Hover Effects WordPress Plugin is an impressive hover effects Collection. Easy to use the beautiful, amazing Image Hover Effects powered by pure CSS3 and iHover, no dependency. 92+ Different Hover Effects with choosing 3 styles.

Video Tutorial:

Plugin Features:

  • Fully Responsive & Mobile Optimized
  • Easy to use
  • No Javascript Pure CSS3
  • Chose Responsive Gird in Option Panel
  • Change Title Font Size
  • Change Description Font Size
  • 5 unique Square hover effects
  • 5 unique Circle hover effects
  • 5 unique Caption hover effects
  • Change Title Font Color
  • Change Description Font Color
  • Control How many items show In 1 Row
  • Custom Circle Animation
  • Support Browser IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
  • Custom post enabled
  • Category Support
  • Custom ordering
  • Amazing option panel
  • Shortcode Powered
  • Unlimited hover items

Click Here To Buy Pro Version Features

RD Hover Effects Pro Version Features :

  • Fully Responsive & Mobile Optimized
  • Unlimited Color Option
  • Support Browser IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge
  • Control Display Item In 1 Row
  • 92+ Different Hover Effects
  • Chose Font Layout Style
  • Custom Font Size
  • Custom Font Color
  • Custom Css Panel Ready
  • 35 Hover Effects Square
  • 25 Hover Effects Circle
  • 32 Hover Effects For Caption
  • Appear Title Before Hover For 10 Items
  • Each Circle Effects With 4 Animation
  • 500+Google Font Support
  • Unlimited Hover Items
  • Chose Different Border Color
  • External link for each hover item
  • Chose Responsive Gird in Option Panel
  • show/hide Border
  • Lifetime Support & Free Upgrade
  • Chose Different Border Color
  • Space in bottom Dynamically
  • External link for each hover item
  • Open link in new tab
  • Support within 12 hours
  • Live Support By Skype
  • Single Site License
  • Developer License (unlimited use)
Author codecans
Profile
Contributors codecans
Tags css animation, css effects, css3 effects, css3 hover effect, css3 transition, effects css3, effects hover, gallery effects, hover, hover css effects, hover effect wordpress, hover effect wordpress plugin, Hover effects, hover wordpress plugin, image caption, image captions, image effects 2015, image hover, image hover 3D, modern hover effects, mouse over, popular hover effects, pure css3 effects, RD Hover Effects, stylish image effects, text effects, wordpress image caption, WP Image, wp image caption, wp portfolio effects
  1. rd-hover-effects screenshot 1

    Adding RD hover item with category

  2. rd-hover-effects screenshot 2

    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.

  3. rd-hover-effects screenshot 3

    click the Rd hover Item Shortcode Button, you will then see a Box open with a ShortCode Option Panel.

  4. rd-hover-effects screenshot 4

    ShortCode Option Panel. Put the same category name which you created before with RD hover Item, and select a style. click Insert.

  5. rd-hover-effects screenshot 5

    you will see a Shortcode in your post/page editor just publish and view page.

Installation of RD Hover Effect is very simple.

Option 1:

  • Download the plugin rd-hover-effects.zip from download location.
  • Unpack the *.zip file and extract the RD Hover Effects folder.
  • Drop the RD 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 RD 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 -> RD Hover effect plugin you can configure the basic settings. Everything else can be done on the fly via Custom post named RD HOVER EFFECT on your Dashboard and via the Shortcode option on any Page or Post that you want.

    Add RD Hover Effect- 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 RD Hover Effect 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 hover effects.

    How To Use:

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

    To create an RD 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

    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 RD Hover Effect Plugin:

  • Once you see custom post name RD hover 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 always short button name to maintain layout
  • Fifth Field : "Enter button URL" Chose a button URL in this field.
  • EX :

    http://codecans.com

    Note: Remember that you have to add a URL, Other String not allowed.

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

    After Created Hover Items Successfully, Now we have to add shortCode on post or page where we want to show Hover Items.

  • Go to Dashboard, Click Ad New Post or page.
  • you will see a Black arrow down button in editor. Just Click On Black Down Arrow button
  • Now Click On "RD Hover Shortcode Setting", you will then see a Box open with a ShortCode Option Panel.
  • In the Shortcode Option Panel there are Lot's Of fields.

    Now I am Describing Fields Details One by one:

  • "Category Name:" Write category name which you created before with RD hover Item. Please remember that the Category Name should be the same as your Hover Item Category. Category name is case sensetive
  • "Select Hover Type" There are 3 unique amazing hover Type,1. Square, 2. Circle, 3. Caption, you may Choose any one which you think prefect for you
  • "Select Hover Style" There are 92+ hover style in our plugin with 3 hover type.
  • "How many items Show in display?":
  • If you Choose "How many items Show in display?" – "5", Then 5 images will show in 1 row, Remember you should create 5 items in RD hover Effects Custom Post First.
    If you Choose "How many items Show in display?" – "4", Then 4 images will show in 1 row.
    If you Choose "How many items Show in display?" – "3", Then 3 images will show in 1 row. 
    If you Choose "How many items Show in display?" – "2", Then 2 images will show in 1 row. 
    If you Choose "How many items Show in display?" – "1", Then 1 images will show in 1 row. 
    This is Important as responsive feature so we added bootstrap system gird column. All Responsive Working Bootstrap System.

  • "Animation type": There are 4 animation for play with Hover Items. Choose once which you like
  • "Choose Font Family": All Google Font is Available here. Choose your favourite font here
  • "Title Font Size": This Option for Changing Title Font Size.
  • "Description Font Size ": This Option for Changing Description Font Size.
  • "Button Font Size": This Option for Changing Button Font Size.
  • "Background Color": You can change Hover Items Background Color. You can chose transparent color to change opacity from color picker
  • "Title Color": This Option for change Title Font Color
  • "Description Color ": This Option for change Description Font Color
  • "Button Font Color": This Option for change Button Font Color
  • "Border Color ": This Option for change Border Color
  • "Title Font Style ": There are 2 font style, 1. "Normal" & second One is "Italic" Choose once which you most like
  • "Description Font Style ": Same here, There are 2 font style, 1. "Normal" & second One is "Italic" Choose once which you most like
  • "Button Font Style": There are also 2 font style, 1. "Normal" & second One is "Italic" Choose once which you most like
  • "show border": If you want to show border arround hover items then check this, otherwise leave it blank
  • "Open link new tab? ": If you want to open link in new tab then check this, Otherwise leave it blank then link will be open in same tab
  • Just Click Insert

    EX:
    [hover category="hover" effects="square" style="style1" item_show_row="rd-col-lg-4 rd-col-md-4 rd-col-sm-6 rd-col-xs-12" circle_animation="left_to_right" title_font_size="18" desc_font_size="13" title_color="#ffffff" desc_color="#ffffff" button_font_size="5"]

    After All Above all just click publish

    And See the Magic of All RD Hover Effect, Enjoy!

    4.7.0 (10 February 2017)

    • Fixed Minor Issue
    • Update Video Tutorial Link

    4.6.9 (2 jan 2017)

    • Solved CSS Issue
    • Change image resize issue
    • Change Main Site to Codecans.com

    4.6.8 (23 Nov 2016)

    • Fixed Space Between Two Items
    • Fixed Button Text Color
    • Fixed CSS Issue

    4.6.7 (30 October 2016)

    • Fixed figure css BUG
    • Fixed Color Issue

    4.6.6 (09 September 2016)

    • Fixed Font Issue
    • Added FAQ for Image stretched

    4.6.5 (19 August 2016)

    • Fixed Image Height Issue
    • Fixed Background Color Issue
    • Changed Demo URL

    4.6.4 (8 August 2016)

    • solved Demo URL
    • Fixed Backend Bugs
    • Fixed Minor Issue

    4.6.3 (26 july 2016)

    • Improve Settings Panel

    4.6.2 (21 july 2016)

    • Added Video in Notice to Upgrade & Readjust Settings 4.6.0+

    4.6.1 (21 july 2016)

    • fixed error when installation

    4.6.0 (21 july 2016)

    • Added Full Setting Panel In Custom Post
    • Added New Video Tutorial
    • Improve Documenatation with New Setting
    • Remove Shortcode Setting
    • Added Automatic Shortcode Generator For Each Items
    • use can 1 click Copy Shortcde and use any where
    • Remove Custom Texonomy
    • Improve Amazing UI

    4.5.9 (july 20, 2016)

    • Fixed Backend Setting Icon
    • Fix Title Color Issue
    • Fix Description Color Issue

    4.5.8 (july 15, 2016)

    • Remove Backend Font With Added CDN
    • Plugin Reduce 300kb space

    4.5.7

    • Improve Responsive CSS
    • Fixed backend Responsive issue

    4.5.6

    • update setting panel

    4.5.5

    • Fixed CSS Issue for Slow Loading
    • Remove "new-caption" CSS from Main PHP

    4.5.4

    • Fixed Caption style issue
    • Added UI New CSS
    • fixed Google font issue (Pro users)

    4.5.3

    • Added Caption Effects For Free
    • Customize Title Font Size Available Free
    • Customize Description Font Size Available Free
    • Customize Title Font Color Available Free
    • Customize Description Font Color Available Free
    • Remove Button & Link (Available For Only Pro version)
    • Author Comments Added In Shortcode Setting
    • Fix Css Minor Issue

    4.5.2

    • fixed Effects 30 hover issue
    • Added Css code for Best UI

    4.5.1

    • Remove extra line from Main file
    • fix minor issue

    4.5.0

    • Fix Responsive Conflict
    • Update Code Format

    4.4.7

    • Modify Code
    • Fix Css For Bootstrap

    4.4.6

    • fix minor issue
    • Formated CSS Code

    4.4.5

    • modify shortcode setting Panel
    • remove extra Code Form Main PHP file
    • fixed Bug

    4.4.4

    • added function
    • fixed css issue

    4.4.3

    • Fixed Style 30 issue
    • fixed style 2 issue

    4.4.2

    • Fixed Css Issue
    • fixed Code Layout

    4.4.1

    • Added Caption Effects

    4.3.4

    • Modified conditional statement stracture
    • Modified Css Code

    4.3.3

    • fix Layout
    • Added new Function

    4.3.2

    • fix New CSS Issue
    • fix new Style Color

    4.3.1

    • Added 10 Square Hover Effects
    • Show Title Before Hover Effects Added
    • Fixed Color Issue

    4.3

    • fixed Css Issue

    4.2

    • added Hover Item Background Color Changer
    • Added Display Hover Item in 1 row = 5 (Now User Can use 5 Item in 1 Row)

    4.1

    • added widgets Support

    4

    • Finally Added Responsive Feature For All Hover Item
    • Added Custom Option That User Can Chose how many Item Display Appear In 1 Row

    3.2

    • Added Responsive Feature For Circle Effects Only

    3

    • Added Custom Font Size For Title individually in Shortcode Option Panel
    • Added Custom Font Size For Description individually in shortcode Option Panel
    • Added Custom Font Size For Button individually in shortcode Option Panel
    • Added Custom Text Color For Title individually in shortcode Option Panel
    • Added Custom Text Color For Description individually in shortcode Option Panel
    • Added Custom Text Color For Button individually in shortcode Option Panel
    • Added Text Font Style

    2

    • Fixed Custom Width issue
    • Fixed Custom Height issue
    • Fixed Effects Issue

    1.2

    • Fixed color issue
    • hover padding issue fix

    1.1

    • Fixed Bugs

    1.0

    • Initial Release

    How can i resize images with RD Hover Effects?

    There are 5 images size you can set with Bootstrap Responsive Gird. then 5 item's will show in 1 row on your webpage.

    There are 5 images size you can set with Bootstrap Responsive Gird. If you use “Display Hover item in 1 row – “4” http://demos.codecans.com/tutorials/images/item-4.jpg

    If you use “Display Hover item in 1 row -“3” then your item size increase little http://demos.codecans.com/tutorials/images/item-3.jpg

    If you use “Display Hover item in 1 row – “2” then your item size increase http://demos.codecans.com/tutorials/images/item-2.jpg

    same if you use display hover item in 1 row – “1” then your image size going big.

    Why Hover Items Images being stretched?

    It’s important to maintain image Ratio, i understand. You know there is limited space in hover effects. So you should use 430×255 pixel image if you are using 3 items in 1 row.

    Example: If you use 800px height image with 1000px width just think this big image how can perfectly place images in 430×255 space place.

    So i recommend you please use 430×255 pixel to get batter image ratio. Let me know if you need anything, i will be happy to assist you. Support Here: https://wordpress.org/support/plugin/rd-hover-effects

    Where can I find documentation?

    Our Text can be found at http://demos.codecans.com/tutorials/rd-hover-effects/ Our Video Tutorial Found Here: https://youtu.be/bmw9YUrNVNo

    The plugin doesn't work, why?

    First, check your version of WordPress: the plugin is not supposed to work on old versions anymore. Make sure also to upgrade to the last version of the plugin.

    Then try to deactivate and re-activate it, some user have reported that this fixes the problem.

    Pay also attention to the new "Roles allowed to copy" option: it should convert the former "user level" option to the new standard, but unknown problems may arise. Make sure that your role is enabled.

    If not, maybe there is some kind of conflict with other plugins: feel free to write me and we'll try to discover a solution (it will be really helpful if you try to deactivate all your other plugins one by one to see which one conflicts with mine... But do it only if you know what you're doing, I will not be responsible of any problem you may experience).

    Share  
    Download
    Version 4.7.0

    Requires WordPress version: 3.0.1 or higher

    Compatible up to: 4.7.2

    Last Updated 10 Feb 2017

    Date Added: 10 Feb 2015

    Plugin Homepage

    Evaluation
    star1
    star2
    star3
    star4
    star5

    4.4 stars
    58 ratings
    41,736 downloads

    Compatibility

    Not Enough Data

    Reports:
    Works: 0
    Broken: 0