Image hover effect in Drupal 8

Image hover effect in Drupal 8 with Imagepin button module

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:

Pins on image with Imagepin Drupal 8 module

Text appears as you hover the mouse over each pin:

Image hover effect with Imagepin Drupal 8 module

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.

Enabling Imagepin Button Drupal 8 module

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

Enabling Imagepin for image field Drupal 8

3) Creating pins for images

Next, when we add content, we see the “Pin widgets on this image” button and click it.

Adding pins to images with Imagepin Drupal 8 module

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.”

Adding pins to images with Imagepin Drupal 8 module

As we save the content item, we can see our pinned image.

Pins on image with Imagepin module Drupal 8

As we hover over it, we see the image hover effect in action — the text shows up.

Image hover effect with Imagepin module Drupal 8

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!

Follow WishDesk

Join our Newsletter

Check out our Privacy Policy for more information.

Join our newsletter to get blog updates straight to your inbox.

Follow WishDesk

Join our Newsletter

Check out our Privacy Policy for more information.