Hover Gallery

https://www.muse-themes.com/products/hover-gallery

This widget connects images to text in a unique way, enabling images to be revealed when hovering over pre-defined text content.

The thing that makes this widget special is that images fill the entire gallery space when revealed, meaning that this widget incorporates elements of both standard image galleries as well as image sliders. And for even extra pizzazz, we've included a customizable clipping path shape as well as a color overlay.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 1.0: Initial release




Setup in Muse

  • Place the widget where you would like the gallery to appear on your site.

  • You may use the widget in any size you like, however, the widget may look best at full browser width.

  • Open the widget option panel.
  • Shape: There is a shape that is used as a clipping mask, that provides transparency from the overlay color. There are a selection of shapes available in the dropdown, or you may select the Custom option to use a custom shape (see Custom Shape below)
  • Gallery Layout: This sets the layout for the widget. The Grid option creates the typical gallery look, while the Rows and Columns options give you a different style of layout.
  • Max Grid Columns: This sets the maximum number of columns for the grid layout. This means that when the browser window is expanded, the column count will not exceed this value.
  • Background Image Opacity: The images you load are considered background images, as they appear in the background of the widget container. This setting determines the opacity of your images. An opacity of 1.0 is 100% opaque, and will be seen with no overlay color seen. An opacity of 0.0 is 100% transparent, and only the overlay color will be seen. We suggest starting with a setting of 0.7 and asjusting from there.
  • Overlay Color: There is an overlay color that is applied over the entire widget area (aside from the clippiing mask shape). Choose your overlay color with this setting.
  • Custom Shape: You may use a custom shape, instead of a default shape found in the Shape option dropdown. Use the Online Shape Generator to generate code to use in the Custom Shape field. When pasting code from the online shape editor, use only the information between : and ;

Example, if your code is clip-path: circle(20.4% at 50% 50%);, only use clip-path: circle(20.4% at 50% 50%)

  • Online Shape Generator: Click this link to access an online shape generator. You may select from one of the many shapes available, or you may edit the shape in the shape editor to create your own shape. Copy the code below the shape editor.

TILE CONTENT SECTIONS There are 8 tile content sections. These sections are used for loading images, entering text content, and controlling content placement and alignment. We will look at the settings in one section. All the sections contain the same options.

  • Background Image: This image loader sets the image that appears when the user hovers over this tile.
  • Enable Title: This enables the title text.
  • Title: This is the title text
  • Enable Subitle: This enables the subtitle text.
  • SubTitle: This is the subtitle text
  • Enable Description: This enables the description text.
  • Description: This is the description text
  • Enable Button: This enables the button.
  • Link: This is the link for the button.
  • Link Label: This is the text that will appear on the button.
  • Link Target: This determines whether the button link will open in the same window or a new window.
  • Internal Content Width: This sets the width for the content area within a tile. The default value is 100%. This means that all the text content will fill 100% of the tile. If you have long description text, that text will fill the entire width of the tile. You may find that the description looks much better if you use a smaller Internal Content Width such as 50%. Using a smaller Internal Content Width also allows you to properly use the alignment options below.
  • Content Vertical Alignment: This aligns all of the text content to the top, center or bottom of the tile.
  • Content Horizontal Alignment: This aligns all of the text content to the left, center or right of the tile. Note that this setting must be used in conjunction with the Internal Content Width setting above. A value of less than 100% will be required in order to see the content align left, center or right.
  • Text Alignment: This sets the algnment of the text.
  • Tile Top/Bottom/Left/Right Padding: These settings apply padding to the top, bottom, left or right of the text content.

CONTENT STYLING
There are an extensive number of styling options availabe in the Content Styling section. These settings are labeled with their exact function name, and will not be discussed in detail here because they are self-explanatory.

Commonly Asked Questions

No commonly asked questions


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links