How to apply a hover effect to WordPress featured images
Learn how to apply a hover effect to WordPress featured images.
2020-12-30
1. Get an image URL
The first thing we are going to need is an image. We will not use an image from our media library, but an external image. You can choose any image from the Internet. Just copy its address. In the example, I will use an image created on Vampixel.
2. Access WordPress admin panel
Access the WordPress admin panel. You will find the "Posts" option on the left side menu. Click on it and then on the "Add New" button. The post editor will open and you will start creating your post.
3. Create a new post
Enter the title of your post and expand the second box "Featured image", on the right side menu. The first box is for internal images, but we will use the second one, which is for external images. Paste the image address in the "Image URL" field and click on the "Preview" button. After that click on the "Publish" button to publish your post. If the editor does not display the second "Featured image" box, you will need to install the Featured Image from URL (FIFU) plugin.
4. Check the homepage
When accessing your homepage, you will see that the post was created. The title and the featured image of your post are displayed. However, if we move the mouse pointer over the image, nothing happens. In fact WordPress by default does not offer any hover effect, although eventually your theme may offer functionality for that. In our case, the hover effect will be applied by the Featured Image from URL (FIFU) plugin, but we still have to configure it.
5. Add a hover effect
Access the Featured Image from URL plugin settings. Go to the "Featured image" tab and then to the "Hover Effects" feature. In the left field you must select one of 18 available effects. I chose the "Gray Scale" effect.
6. Check the result
Accessing our homepage again, we see that the "Grays Scale" effect has been applied to the featured image. If we move the mouse pointer over the image, it will return to its original colors. But if you accessed the homepage and the images are not in shades of gray, then you should go back to the FIFU settings and add a CSS selector to inform the group of images in which the hover effect should be applied. In our case, it was not necessary to define a selector.
A. Sepia hover effect
The full list of available hover effects consists of 315 Degrees, 360 Degrees, Blur, Blur Gray Scale, Brighten, Circle, Flashing, Gray Scale, Horizontal Rotation, Opacity Color, Opacity White, Rainbow, Rotate, Sepia, Shine, Vertical Rotation , Zoom In and Zoom Out. Here we are showing the Sepia effect. Hovering the mouse pointer over the image, it returns to the original colors.
B. Rotate hover effect
We will not show all 18 available effects because the main purpose was just to show how we can apply a hover effect to a featured image. So the last effect that we will show here is Rotate, which undoes the rotation of the image when the mouse pointer is over it.
