Custom Card List - Dynamic Thumb + Animation


Has anyone skills to help me on this couple of issues with Card List?

1) Dynamic Thumbnail:

In the place of the thumb image I need to add a dynamic circular percentage graph (similar to this one - but without JQuery).

I failed in all attempts to replace the thumbnail <img> tag with a <div> or <svg> (to make the magic happens)


2) Card Selection Animation

In my list, cards are compact when it is not selected and as soon as the user select (tap) it the card is highlighted and open a secondary (card’s footer) list of options.

How to apply a smoothly animation for this transition? The one I did is not quite right and in the end it is not smoothly adjust the new layout.

Here is the Codepen for reference:

Thank you very much for this great community,