Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

FAVIMAGEHOVER is a free responsive Joomla! module that lets you upload any image and assign it a title with a Font Awesome icon. On hover, the image can be further customized with a short description and a "Read More" link. SEE THE DOCUMENTATION

upload any
image

add a title &
description

CSS3 effects
on load & scroll

free Joomla!
module

FavImageHover Columns

This module supports a 6 column layout which means it can have 6, 5, 4, 3, 2 or 1 column for the module layout without assigning each module to a new module position. Using the module settings, each one of the columns can be further customized. Here are some examples of different column layouts:

Lorem ipsum dolor magna aliqua.

Title Text

Lorem ipsum dolor magna aliqua.

Title Text

Lorem ipsum dolor magna aliqua.

Title Text

Lorem ipsum dolor magna aliqua.

Title Text

Lorem ipsum dolor magna aliqua.

Title Text

Lorem ipsum dolor magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet magna aliqua.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

FavImageHover Effects

This module supports 8 preset CSS3 effects on page scroll and load which can be changed by using the module settings. Here are some examples of different CSS3 load & scroll effects for this module:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title Text

FavImageHover Documentation

The downloaded package for the module is a .zip archive that needs to be unzipped before use. After it has been unzipped, inside the downloaded package you will find:

  1. the module's .zip archive - must to be installed using EXTENSIONS/MANAGE/INSTALL
  2. the ReadMe.txt file - has useful information about the product

Once installed, find the module in EXTENSIONS/MODULES and open it:

FavImageHover Joomla module documentation main screen

MODULE SETTINGS - this tab controls the general settings, the ones that apply to all elements of the module.

MODULE CONTENT - this tab controls the individual settings for each element of the module such as images, text or icons for each one of the columns.

Module Settings

1. Module Options

FavImageHover Joomla module documentation settings main

  1. LOAD JOOMLA! JQUERY - This setting loads Joomla!'s jQuery library. Choose NO if your website loads jQuery from an external source.
  2. LAYOUT EFFECT - Choose a CSS3 effect for the layout on page scroll and load. Note that the CSS3 features are not supported by older browsers.

2. Image Options

FavImageHover Joomla module documentation settings image

  1. IMAGE BORDER RADIUS - Insert the border-radius for the image using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.

3. Title Options

FavImageHover Joomla module documentation settings title

  1. TITLE GOOGLE FONT - Insert the name of the Google Font for the title of the module, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  2. TITLE FONT WEIGHT - Set the font weight for the title of the module.
  3. TITLE FONT STYLE - Set the font style for the title of the module.
  4. TITLE PADDING - Insert the padding for the title of the module using pixels or percent (for example: 14px or 10%, not 14). The padding is a CSS property that sets the space around the content. The padding can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
  5. TITLE FONT SIZE - Insert the font size for the title of the module using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  6. TITLE LINE HEIGHT - Insert the line height for the title of the module using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  7. TITLE TEXT ALIGN - Choose the text align for the title of the module.

Title Icon Options

  1. TITLE ICON VERTICAL ALIGN - Choose the vertical align for the icon of the title of the module.

4. Description Options

FavImageHover Joomla module documentation settings description

  1. DESCRIPTION FONT SIZE - Insert the font size for the text of the image hover using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  2. DESCRIPTION LINE HEIGHT - Insert the line height for the text of the image hover using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  3. DESCRIPTION ALIGN - Choose the text align for the the image hover.

5. Read More Options

FavImageHover Joomla module documentation settings Read More

  1. READ MORE BORDER RADIUS - Insert the border-radius for the Read More text using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.
  2. READ MORE PADDING - Insert the padding for the Read More text using pixels or percent (for example: 14px or 10%, not 14). The padding is a CSS property that sets the space around the content. The padding can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.

Module Content

This module supports a 6 column layout. This means it can have 6, 5, 4, 3, 2 or 1 images for the module layout without assigning each module to a new module position. Each one of the images from 1 to 6 has these options:

1. Image Options

FavImageHover Joomla module documentation content main

  1. SHOW IMAGE - Choose if the image for this module should be displayed or not.
  2. UPLOAD IMAGE - Upload the image for the module. A blank field reverts the setting to the default value.
  3. IMAGE ALT TEXT - Insert the text for the image Alt. A blank field reverts the setting to the default value.

2. Title Options

FavImageHover Joomla module documentation content title

  1. TITLE TEXT - Insert the text for the title. A blank field reverts the setting to the default value.
  2. TITLE COLOR - Choose the color for the title. A blank field reverts the setting to the default value.
  3. TITLE BACKGROUND COLOR - Choose the color for the background of the title. A blank field reverts the setting to the default value.
  4. TITLE ICON - Insert the Font Awesome icon name (for example: fa-magic or fa-joomla). A blank field reverts the setting to the default value.

3. Description Options

FavImageHover Joomla module documentation content description

  1. DESCRIPTION TEXT - Insert the text for the description of the module. A blank field reverts the setting to the default value.
  2. DESCRIPTION TEXT COLOR - Choose the color for the description of the module. A blank field reverts the setting to the default value.

4. Read More Options

FavImageHover Joomla module documentation content readmore

  1. READ MORE TEXT - Insert the text for the Read More text to be displayed on the hover box, below the content. A blank field reverts the setting to the default value.
  2. READ MORE COLOR - Choose the color for the Read More text. A blank field reverts the setting to the default value.
  3. READ MORE BACKGROUND COLOR - Choose the color for the background of the Read More text. A blank field reverts the setting to the default value.
  4. READ MORE LINK - Insert the URL for the Read More text. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
  5. READ MORE TARGET - Choose the link target of the URL for the Read More text link.

The module features using CSS3 have limited support for older browsers, so please check the demo first.

Being a responsive module, this Joomla! module has no fixed width. The maximum width of the module is the width of the module position containing the module and/or the width of the device used (desktop, tablet or mobile). To test the responsive behaviour of the module columns, simply adjust the width of the browser window to different sizes.