Для создания эффекта наведения, аналогичного тому, что используется в меню на указанном сайте, вам потребуется использовать HTML и CSS. Также мы добавим эффект плавного появления текста при наведении. Давайте создадим структуру HTML и стиль CSS, который даст вам желаемый результат.
### HTML
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Меню ресторана</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-item">
<div class="trapezoid"></div>
<div class="content">
<h3>Название блюда</h3>
<p>Описание блюда. Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</body>
</html>
```
### CSS (styles.css)
```css
body {
font-family: Arial, sans-serif;
}
.menu-item {
position: relative;
width: 300px; /* Ширина элемента меню */
margin: 20px;
}
.trapezoid {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%; /* Высота адаптируется к высоте контента */
background-color: black; /* Цвет фона трапеции */
clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0); /* Формируем трапецию */
opacity: 0; /* Начальное состояние - скрыто */
transition: opacity 0.3s ease; /* Плавный переход */
}
.menu-item:hover .trapezoid {
opacity: 0.7; /* Прозрачность при наведении */
}
.content {
position: relative;
padding: 20px; /* Отступы для содержимого */
background-color: white; /* Цвет фона содержимого */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Тень для контента */
}
.content h3 {
margin: 0;
transition: opacity 0.3s ease; /* Плавный переход для текста */
opacity: 0; /* Скрыт по умолчанию */
}
.menu-item:hover .content h3 {
opacity: 1; /* Появление текста при наведении */
}
.content p {
transition: opacity 0.3s ease; /* Плавный переход для текста */
opacity: 0; /* Скрыт по умолчанию */
}
.menu-item:hover .content p {
opacity: 1; /* Появление текста при наведении */
}
```
### Как это работает:
1. **HTML Структура**:
- Создаем контейнер для каждого элемента меню (`.menu-item`).
- Добавляем трапецию (`.trapezoid`) и содержимое (`.content`).
2. **CSS Стили**:
- **Трапеция** создается с помощью `clip-path`, что позволяет задавать произвольную форму.
- Устанавливаем начальную прозрачность для трапеции и текста в содержимом.
- При наведении на элемент `.menu-item`, трапеция становится полупрозрачной, а текст плавно появляется.
Теперь, когда вы вставите приведённый код в HTML и CSS файлы, вы будете иметь гладкий эффект наведения с черной трапецией и плавно появляющимся текстом. Вы можете подправить стили под свои нужды, экспериментируя с цветами, размерами и стилями текста.