Как сделать эффект при наведении как в меню на этом сайте?

Question

[FavnAristotel]

Как сделать эффект при наведении как в меню на этом сайте ссылка?
Как сделать эту черную трапецию у блюд ?Что бы она подстраивалась под высоту ингредиентов блюда?
Хотелось бы увидеть готовый код потому что довольно долго пытался сам реализовать .
Как сделать что бы текст состава плавно появлялся при наведении на блюдо как на этом сайте . Пытался загрузить фото но не получилось .

Comments

[MrColdCoffee]

Вы же можете посмотреть как на этом сайте реализовано) :
Угол через картинку в :before
Эффект при наведении на js

[FavnAristotel]

MrColdCoffee, и как найти файл где это реализуется из всех файлов в source?

[MrColdCoffee]

FavnAristotel, /css/style.css /js/js.js

[Ankhena]

Не нужен там JS для наведения, достаточно обычного CSS.
Делать трапецию прямо как там, тоже не нужно.
Конкретно там это две png картинки.
Если уж картинками, то только треугольник, да и тот в svg.

Гуглите как делать треугольники на CSS.
Если не получится, приходите с кодом в песочнице и показывайте что именно не вышло.

Answer 1

[Антон Антон]

css-only но на скорую руку, без этих ваших :before и прочих
https://play.tailwindcss.com/3fXiLqJ5ZL
единственное - у спрятанного текста фиксированная максимальная высота и ограничение должно быть максимально близко к содержимому для красоты. В общем случае - надо с помощью js заполнять.

после нескольких итераций получилось так:
https://play.tailwindcss.com/d325nRTQ36

Comments

[FavnAristotel]

Спасибо .Но как это написать на css ?

[Ankhena]

без этих ваших :before

Если заменить пустые теги на эти наши псевдоэлементы, то будет супер.
И работать будет и без мусора в разметке.

А если абсолют заменить на гриды, то будет просто праздник, а не код.

[Антон Антон]

FavnAristotel, там есть "сгенерированный css".

Вообще я как начал пользоваться tailwind - на обычный css почти забил, ибо неудобно. Всё равно компоненты переиспользуемые получаются. Конечно, чем начать использовать tailwind нужно, конечно, разобраться в css.

В этом примере без tailwind только triangle-clip.

[Антон Антон]

Ankhena,

А если абсолют заменить на гриды

ну тут можно, конечно, сделать и грид/флекс у главного дива и отправить в угол его стилем, но, кажется, это будут те же яйца.

[Ankhena]

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

[Ankhena]

Антон Антон, конечно, колонки-то потерялись, размеры потерялись, пустой div остался.

[Антон Антон]

Ankhena, получилось как-то так: https://play.tailwindcss.com/hFjxe4YYlk на пару тегов меньше.
что-то еще можно сделать?

[Антон Антон]

Ankhena, если прилепить абсолют к псевдоэлементу, от можно еще на один тег меньше сделать https://play.tailwindcss.com/d325nRTQ36