Практиковаться, читать умные книжки по алгоритмам и структурам данных. Вот берите например https://leetcode.com/ отсортируйте по сложности (с самых легких), и делайте-делайте. Но без теории алгоритмов будут костыли, поэтому лучше почитать что-то.
Для того чтобы решить задачу нужно знать решения типовых задач - например чтобы сформировать дерево нужно применить рекурсию по связи родитель-дочерний. Входные данные это двумерный массиив 1 измерение это элементы, 2 измерения это свойства элементов. Выборка происходит по свойствам элемента. На каждую выборку 1 элемента происходит новый поиск элементов - рекурсия.
Таким образом решение задачи сводится к ее классификации и применении типового шаблона решения на конкретную задачу. Типовые шаблоны решений это и есть алгоритмы.
Знаешь все алгоритмы - умеешь решать все задачи.
Если задача большая - то она делится на подзадачи.
Сделайте блок-оверлей, с фоном градиентным и закруглением, как у основного блока.
Блок с контентом сделайте тоже с закруглением и той же ширины-высоты, поместите его внутрь блока с фоном.
На hover - уменьшите ширину/высоту блока с контентом и margin-left/margin-top
Iframe вставить у него в src указать file:// если origin будет совпадать, то после колдовства со всякими параметрами навроде sandbox может быть и выйдет.
