It’s an undoubtable truth that images have a strong power to engage customers. And there are plenty of ways to enhance this engagement, one of which is the image hover effect (aka mouseover effect).
Features like this are meant to add a creative and interactive touch to your website, spark users’ interest, save space, make your website more user-friendly, and increase conversions.
Drupal 8 has easy content creation as a priority, and there are also many useful modules for creating image hover effect. Let’s take a look at a simple but nice one — the Imagepin button module.
The Imagepin button Drupal module’s brief overview
The Imagepin button module combines image hover effect with an interesting image pinning effect. It allows you to add pins to images that will show some text when someone hovers the mouse over them.
During content creation, editors will have a special option — “Pin widgets on this image.” They can create as many pins as they wish, write the text for them, and position them anywhere throughout the image.
Pins appear on the image:
Text appears as you hover the mouse over each pin:
The module’s extensibility
Out-of-box, the Imagepin button module cooperates with the Slick module and displays all widgets as a carousel. But it’s just the beginning. The module is extensible with custom widgets, and the use of JavaScript can add more interactivity.
So it is easy to adjust the module’s behavior to your website’s particular needs with the help of a good Drupal team. Let’s now see the module’s “classic” work on a simple example.
Creating image hover effect with the Imagepin button module
1. Installing and enabling the module
It begins with installing the Imagepin button module — either via Composer or by downloading it from drupal.org. Then it should be enabled in the “Media” section on the module list.
2) Enabling the Imagepin for a content type’s image field
We go to the Manage Display tab of a content type that contains our image field and click the cogwheel next to this field. We need to check “Enable users to pin widgets on this image.” While doing this, we can:
- choose which image style to use for dragging the pins
- optionally set breakpoints for mobile devices
3) Creating pins for images
Next, when we add content, we see the “Pin widgets on this image” button and click it.
This button brings us to the “Pin widgets” UI where we see available widgets (none added yet). Let’s click “Add new” and submit the text we want to display.
For example, on our image of Europe Travel Map, we could pin sightseeing objects — and start with “Eiffel Tower.” So we write its name in the text field.
We check it in the “Available widgets” and it turns orange, which means it is active. So we can drag the position of the pin to the place where we want to see it. And then we click “Save these positions.”
As we save the content item, we can see our pinned image.
As we hover over it, we see the image hover effect in action — the text shows up.
Get a nice image hover effect created for your Drupal website!
We have shown you a simple example of image hover effect in Drupal 8 created by the Imagepin button module. Of course, it can be fully customized to meet your ideas.
So if you need any help with:
- configuring the Imagepin button module
- extending it with custom plugins
- creating image hover effect using other tools
contact our expert Drupal team!
