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!

Follow these steps to create 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 "Link" and "Quote" 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 in to 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 reference 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.
<div class="image-container">
<div class="image" style="background-image: url({{Image}})">  
<div class="img__description">{{Quote}}
</div>
</div>
</div>
6
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:
<style>
.image{
margin: 0 !important;
width: 100%;
height: 100%;
}


.image:hover .img__description {
visibility: visible;
opacity: 1;
}


.image:hover .img-overlay{
visibility: visible;
opacity: 1;
}
.img-overlay{
position: absolute;
width: 100%;
height: 100%;
background: rgba(169, 169, 169, 0.94);
visibility: hidden;
}


.img__description {
align: middle;
position: absolute;
padding-top: 3.4em;
padding-right:0.5em;
padding-left:0.5em;
width: 100%;
margin-left: auto;
margin-right: auto;
height: 100%;
font-size: 1.1rem;
background: rgba(169, 169, 169, 0.98);
top: 0;
bottom:0;
left: 0;
right:0;
visibility: hidden;
opacity: 0;
color: #000;
text-align:center;


transition: opacity .2s, visibility .2s;
}
</style>
7
If you wish to change any of the styling within the description box, you will want to change the code in .img_description. Here are 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.