Glad to hear you got it working. One tip, you can bundle some of the CSS together for multiple tiles, specifically the first two parts, e.g.:
#tile-89 .tile-title::after, #tile-90 .tile-title::after, #tile-91 .tile-title::after {
visibility: visible;
position: absolute;
text-align: center;
left: inherit;
right: 0;
bottom: 0;
white-space: pre-wrap;
}
#tile-89 .tile-title, #tile-90 .tile-title, #tile-91 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}
You would then need to set their titles individually, and for neatness we could probably reformat it slightly:
#tile-89 .tile-title:after { content: 'Classical Christmas'; }
#tile-90 .tile-title:after { content: 'Rock Christmas' ; }
#tile-91 .tile-title:after { content: 'Relaxing Christmas' ; }
And one more tip, comments often help, particularly as you end up with more and more CSS. You can see an example of this in my original response, with text enclosed by /* and */.
That's correct, it's only if you re-create it. There is a way to change the id that I have seen, but it wasn't a common set of steps.