Как реализовать данное наложение?
Не получается реализовать такое наложение
Вот код:
<div class="main_stage"> <div class="h">Анализируем</div> <div class="h">Прототипируем</div> <div class="h">Дизайним</div> <div class="h">Программируем</div> <div class="h">Тестируем</div> <div class="h">Релизим</div> <div class="h">Продвигаем</div> </div> <style type="text/css"> .main_stage{ width: 100%; float: left; } .h{ width: 100px; opacity: 1; background: #FFFFFF; margin-right: -50px; border: 1px solid black; border-top-left-radius: 40px; border-bottom-left-radius: 40px; padding: 15px; display: inline-block; } .h:hover{ background: #F2A456; position: relative; margin-right: -50px; } </style> |
<div class="main_stage"> <div class="h">Анализируем</div> <div class="h">Прототипируем</div> <div class="h">Дизайним</div> <div class="h">Программируем</div> <div class="h">Тестируем</div> <div class="h">Релизим</div> <div class="h">Продвигаем</div> </div> <style type="text/css"> .main_stage{ width: 100%; float: left; } .h{ width: 100px; opacity: 1; background: #FFFFFF; margin-right: -50px; border: 1px solid black; border-top-left-radius: 40px; border-bottom-left-radius: 40px; padding: 15px; display: inline-block; } .h:hover{ background: #F2A456; position: relative; margin-right: -50px; } </style>
Дополнительно:
Отрицательный margin-left
Собственно и ваш вариант работает.
snippet
- Нужно именно наложение границы соседнего блока с правой стороны
- rrddxx, а что у меня в примере? Что не так-то?
- Может имеется ввиду вот такой вариант?
snippet
- ProjectSoft, тоже прикольно
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации наложения на изображение веб-сайта необходимо использовать CSS. Существует несколько способов добиться этого эффекта, в зависимости от того, что именно вы хотите добавить на изображение.
Один из способов - использовать псевдоэлементы :before или :after в CSS. Например, если вы хотите добавить полупрозрачный слой поверх изображения, можно использовать следующий CSS код:
.overlay { position: relative; display: inline-block; } .overlay::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* цвет и прозрачность слоя */ }
Просто добавьте класс "overlay" к вашему изображению, и полупрозрачный слой будет добавлен поверх него.
Если вы хотите добавить текст или другие элементы на изображение, можно использовать абсолютное позиционирование. Например, чтобы добавить текст в центр изображения, можно использовать следующий CSS код:
.overlay { position: relative; display: inline-block; } .overlay::before { content: "Некоторый текст"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; }
Этот код добавит текст "Некоторый текст" в центр вашего изображения.
Надеюсь, эти примеры помогут вам реализовать наложение на изображение на вашем веб-сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.