Лично мне не читабельно.
Если нужна видимость вложенности, используйте препроцессор.
По поводу длины селекторов, рекомендуется не более 3х(не считая псевдоселекторы/классы), для мелких проектов почему бы и нет.
Но лучше применять модульность и максимально изолировать блоки друг от друга, т.е. использовать например БЭМ именование.
Если название продукта во всех карточках с одинаковым количеством строк, то задайте жестко высоту и тогда сможете использовать absolute.
Сделайте живой пример например тут jsfiddle.net
.block1 a, .block2 a {
display: block;
height: 100%;
}
Ссылка это строчный элемент, т.к. у вас нет текста в них, то размеры получается нулевые.
В первом примере вы не можете кликнуть, потому что некуда.
Во втором примере, картинок не видно потому что размеры ссылки опять же нулевые. Если в этом примере у дивов нет явно указанных размеров то они "схлопываются". И вообще вставлять в ссылку блочный элемент не рекомендуется.
Рисовать в векторе нужно. Либо в вашем случае, самое простое решение это html map area.
Заходите сюда htmlmapgenerator.ru, загружаете картинку и размечаете области, в ответ получаете готовый код.
Но лучше конечно в SVG. Можете тут попробовать что-нибудь нарисовать в векторе, если не очень сложное editor.method.ac
По существу, все возможно. Но пробиться там сложно из-за жесткой модерации, месяцами могут пинать и не всегда понятно в чем именно косяк. Может дизайн говно, но они об этом не скажут, там отвечают шаблонами. Вот и получается, что сидишь и чешешь репу почему не принимают. Ну и чувак выше ответил, дизайнер крутой тоже нужен и само собой не менее крутой верстальщик.
На html макетах много не заработаешь, больше ценятся WP шаблоны. Пробуй )
