Adding a Hover Image to your Drupal Content Page.
Hover Images allows you to add multiple images to one block that also have naturally integrated links. Before starting these blocks, be sure that you have your image either saved to your editing device or have preloaded your image into the Drupal media library.
- Add Hover Image Block
Starting from your content page, scroll up and select the “Layout” button. From there, select the “Add block” option in the area where you want the block to be. Select the “Create Custom Block” option at the top of our pop-up menu and select our “UTC Hover Images”.
- Formatting your Hover Image
a. “Image Orientation”
For making your hover images appear either horizontally or vertically. It is critical that all your images are all vertical or all horizontal. Strange cropping will occur if you create a mix.
Note: In cases where there are 3 or 4 horizontal images, the screen size of the device or window may prohibit the copy from displaying due to space constraints.
b. “Convert Color Images to Black and White“
If you want to convert your color images to black and white. This is helpful if you want to add a blue or gold overlay (below) to create a duotone appearance.
c. “Overlay Color for Duotone Effect“
This option adds different tones to your images and create duotone effects, that comes before the hover.
d. “Make Initial Titles Larger“
This applies to the first title option (not the rollover-effects title) and is ideal for sections without columns.
e. “Hide Initial Titles”
This hides the initial title that shows on page load so that only the image shows. The title on the rollover effect still shows.
Note: The user may not know to rollover the image for more information, except on mobile when this block turns into cards.
- Add Infomation
Next, the hover block image information fields for you title, text, URL and link text for embedded links.
You also have the option to add multiple hover images in one block, the maximum is four, but keep in mind that past 3 images put in the horizontal orientation, the display of these images may be affected or not display properly depending on the device you are using for editing. Four works great for vertical images in most instances.
You will also want to note that because you can “hover” on mobile devices, the hover images will turn into cards with a button for those. - Save and Finish!
Select “add Block” at the bottom of your Configure menu and you are done!
We also recommend testing the links of your images after publishing by pressing the desired picture. As you can see, our hover image works perfectly.