Как реализовать правильно подобный интерфейс?

Question

[Владислав]

Всем привки))

Есть такой сайтик tracksflow.com - очень глючная вещь...однако мне понравилась там одна в штука))

При наведении мыши на альбом, появляется затененный блок со ссылками...однако, этот самый блок тоже является ссылкой))

Привожу картинку(1- по умолчанию, 2 - при наведении мыши)



Как мне такую фишку сделать?

Вот мои наброски jsfiddle.net/uku3nzwu/3

У меня не получается сделать появляющийся прозрачный див ссылкой, а если и получается, то не работают ссылки внутри этого прозрачного дива...

Что подскажете?

Или мб какой-то другой способ есть?

Comments

[Владислав]

@DonSinDRom ВСМ?

Answer 1

[Евгений Петров]

Не вкладывайте в ссылку другие ссылки. Это очень грубая ошибка.

Здесь же всё просто:
1. Есть блок с картинкой
2. В блоке есть вспомогательный блок с основной и вспомогательными ссылками
3. По умолчанию блок занимает часть высоты, обрезая всё, что не уместилось
4. При наведении блок увеличивает высоту на 100%

Вот вам пример, как делаются такие штуки-дрюки codepen.io/cleric/pen/kmrfb

Comments

[Владислав]

>>В блоке есть вспомогательный блок с основной и вспомогательными ссылками

Во-во))
Как это в HTML написать?

[Maksim Zverev]

@DubecZ codepen.io/anon/pen/vGwyF один из вариантов.

[Евгений Петров]

@DubecZ смотрите пример

[Владислав]

@m1skam я решил немного отойти от этого варианта)) но мало ли, мб кому-то понадобится)) пасиб :D

[Евгений Петров]

@DubecZ похоже, придётся продублировать... codepen.io/cleric/pen/kmrfb