Ниже — несколько простых вариантов: чисто на HTML/CSS (рекомендуемый, лёгкий и быстрый), небольшой JS для корректной работы на сенсорных устройствах и — если нужно — плагины для WordPress.
1) Простой и красивый вариант на CSS
HTML:
<html>
<body>
<a class="card" href="#">
<img src="image.jpg" alt="Услуга">
<div class="title">Название услуги</div>
<div class="overlay">
<nav class="menu">
<a href="#more">Подробнее</a>
<a href="#order">Заказать</a>
<a href="#contacts">Контакты</a>
</nav>
</div>
</a>
</body>
</html>
CSS:
.card {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.card img {
display: block;
width: 100%;
height: auto;
}
.title {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 12px;
background: rgba(0,0,0,0.6);
color: #fff;
font-weight: 600;
box-sizing: border-box;
}
.overlay {
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.45);
opacity: 0;
transform: translateY(10px);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
}
.card:hover .overlay,
.card:focus-within .overlay {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.menu {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.menu a {
color: #fff;
background: rgba(255,255,255,0.08);
padding: 8px 14px;
border-radius: 4px;
text-decoration: none;
transition: background .15s;
}
.menu a:focus,
.menu a:hover {
background: rgba(255,255,255,0.18);
outline: none;
}
Пояснения:
- .title виден всегда (внизу картинки).
- .overlay с меню появляется на :hover или когда внутрь попадает фокус (для клавиатурной навигации используется :focus-within).
- pointer-events управляет кликабельностью (чтобы скрытое меню не перехватывало события).
2) Поддержка сенсорных устройств (клики)
На телефоне нет hover, поэтому удобно раскрывать меню по первому тапу и переходить по ссылке по второму. Простой JS:
<script>
document.querySelectorAll('.card').forEach(card=>{
card.addEventListener('click', function(e){
if(!this.classList.contains('is-open')){
e.preventDefault(); // предотвратить переход по первому тапу
this.classList.add('is-open');
// закрыть другие, если нужно
document.querySelectorAll('.card.is-open').forEach(c=>{
if(c!==this) c.classList.remove('is-open');
});
}
});
// закрыть при клике вне
document.addEventListener('click', function(e){
if(!card.contains(e.target)) card.classList.remove('is-open');
});
});
</script>
И в CSS добавить:
.card.is-open .overlay { opacity: 1; transform: none; pointer-events: auto; }
3) Доступность (ARIA и клавиатура)
- Делайте ссылки фокусируемыми (а не только контейнеры).
- Для интерактивных карточек используйте role="group" и управляемый aria-expanded, если пункт раскрывается.
- Поддерживайте :focus и четкие фокус-стили для ссылок.
4) Интеграция в WordPress
- Если вы пользуетесь конструктором: Elementor (бесплатный + Pro для расширенных эффектов) умеет накладывать оверлеи и кастомные hover-эффекты.
- Плагины Image Hover Effects (много разных вариантов) / Image Hover Effects Ultimate / WPBakery/Advanced Custom Fields + шаблон — если хотите встроить в тему кастомные поля.
- Для легкости лучше вставить HTML/CSS в шаблон темы или в блок "HTML" (Gutenberg) и подключить JS через custom.js или в functions.php.
5) Рекомендации по стилю как на примере (brooklandsdetailing.ru)
- Используйте плавные переходы (transition), полупрозрачные фоны (rgba) и центральное выравнивание меню.
- Добавьте иконки (SVG) рядом с ссылками для визуальной похожести.
- Для сетки услуг используйте CSS Grid/Flexbox и одинаковые соотношения картинок (object-fit: cover) для аккуратного вида.
Если хотите — могу:
- Подготовить адаптированный код для вашей страницы (укажите HTML/структуру и размеры).
- Подсказать, как вставить это в вашу тему WordPress (укажите, какой конструктор/тема используется).