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
Setup in Muse
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.
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
No known issues or conflicts
Additional Info Links