How to add a description on hover using custom HTML

The possibilities with our Cards template are endless: Whether you want to create an interactive description for users or create a fun interactive game, using custom HTML on this template can do all of that and more!

How to add a description on hover

1

Add a column to your datasheet containing the information that you want to appear in your on-hover description. In our example, that's the "Quote" and "Link" columns.

2

Next, you need to make sure that the column you have just created is entered in the Select columns to visualise panel. In our case, the data was in column E, so we entered this column into the Text option.

3

Under the Cards settings, switch on Customise card HTML. There will be existing code in this box, but you can delete that so we are able to input our own code. Don't worry if everything disappears, it will soon re-appear when we copy and paste our HTML in.

4

By using custom card HTML, we are now controlling the elements and information that will be displayed within the card, rather than letting Flourish automatically input the data we have selected. To begin with, we are going to place our image in with the all-important hover description. Since our images are placed underneath the Image column, we are going to refer to that for the images to appear. Alongside this, we are going to include the content we want to appear when somebody hovers over the image. Since our content is underneath the Quote column, we will use that as our reference.

5

The styling within this HTML is where you will be able to change the size of the description box, font color, size, anything! 

Here's the styling we have used to create the on-hover description:

6

If you wish to change any of the stylings within the description box, you will want to change the code in .img_description. Here are a couple of options you may want to change:

• font-size: Here you can change the size of your text
• padding-top: This will change where the text appears in the hover description.
• background: Use this to change the color of the description box.
• color: Use a hex-code to change the color of the font

TIP: Use RGB to create a low opacity by using 0.1-0.9 values.

If your columns are different names to what is in the text, that is no problem! Update the column name in the double curly brackets with the title of yours.

Voilà, your hover description should look something like this by using the code above. 

Hover content with inline images

You may need to not only include images in your card, but you may want to add inline images to the hover as well. To do this, follow these steps:

1

Follow the same steps above to achieve your hover. You will now want to add new columns to upload your images that you want to appear when a user hovers over.

TIP: If you need to use the same images for all of the cards on hover like we did, you only need to upload the image once and you can either copy and paste the image link, or use the square in the bottom right of the cell to drag the cell contents down.

2

You will need to add some additional code for your images to be included in your hover section of the cards. This should be included in the "back" section of your code:

3

These new features now need some additional styling to appear just how they should be. This is how we styled our hover features in the example above:

Your images should now appear inline your hover description!