J51-Imagehover

The J51-ImageHover module extension allows you to quickly and easily create image galleries with beautiful and functional hover effects, bringing a touch of style and interactively to any website page.

joomla 51

A little over a year ago we (Joomla51) started the side project imagehover.css (http://www.imagehover.io).

Our intent with the project was to create a responsive and versatile CSS library which would allow users to easily create image to text hover effects. There has been some great advancements recently in CSS, in particular regarding animation and we would like to think that we have used these advancements to their full potential. Been totally CSS driven ensures smooth and versatile transitions across all devices and platforms with close to no dependencies.

The entire library weighs in at a pocket size 19Kb. The library is unique in that it uses the same markup for each effect. All you have to do is to include the appropriate class of the animation effect of your choice within your markup and the CSS library will take care of the rest.

1

Thankfully the imagehover.css has grown to be hugely popular and little more than a year later we decided to create a Joomla module extension which allows Joomla users to easily implement the library within their projects. Our plan for the module was simple, to create an extension that was easy and versatile to use and that implemented the full feature set of the imagehover.css library.

In creating the module we have tried to make the extension as versatile as possible. Been a template club we would like to think that we have a keen understanding of what features a user would need in such extension.

Each image in the gallery is fully scalable and responsive, easily adapting to all screen widths. We have included a number of options to control how many columns you would like used for the gallery for each of the major screen sizes. So for example a gallery that may span 4 columns on a desktop can be set to display in a single or double column on smaller screens.

2

Options for setting vertical and horizontal spacing are also available allowing the user to easily change from a compact tiled layout to a more spacious open layout.

Other options include some color choosers to set the background and text color, allowing you to easily integrate the style of your gallery into that of your Joomla template. Text alignment options also exist for both vertical and horizontal alignment of text within the image frame.

Hover effects can be applied individually to each image within your gallery so you can either use the same hover effect throughout your gallery or mix and match to your own taste with a different effect on each. The choice is totally up to you. You can add as many images as you wish and with each image you can add a title and caption to be displayed on hover. A field is also available to link each image to a URL of your choice. That URL may be to a page within your site or to an external site.

3

Last but certainly not least, the module is completely free to download and can be used on any commercial and personal site. You can show us some love in the form of a review on the Joomla extension directory if you find this module extension useful.

And that pretty much sums it up for the J51 ImageHover module. We hope that you enjoy using it as much as we enjoyed creating it. If there is any features you would love to see implemented within the module please feel free to mentioned it within the Joomla51 forum and we will happily look into it and hopefully include in future updates.

About the author

Ciarán Walsh

A template developer for Joomla51.com. Currently part of the core team for the Joomla 4 frontend and backend template.

Please publish modules in offcanvas position.