|
|
| Строка 1: |
Строка 1: |
| .home-card__background {
| | #home-nav { |
| position: relative; | | margin-top: 1rem; |
| z-index: 0;
| |
| overflow: hidden;
| |
| border-radius: 8px;
| |
| background-size: cover;
| |
| background-position: center;
| |
| width: 300px; /* или auto, как нужно */
| |
| height: 200px; /* под размер картинки */
| |
| } | | } |
|
| |
|
| .home-card__background:before {
| | #home-nav .home-card__foreground { |
| content: "";
| | font-weight: 500; |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: rgba(0, 180, 255, 0.05);
| |
| box-shadow: 0 0 25px 10px rgba(0, 180, 255, 0.4);
| |
| border-radius: 8px;
| |
| z-index: 0;
| |
| pointer-events: none;
| |
| transition: box-shadow 0.3s ease, transform 0.3s ease;
| |
| }
| |
| | |
| .home-card__foreground { | |
| position: absolute; /* чтобы текст поверх всего */
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| z-index: 1;
| |
| color: white; /* или другой контрастный цвет */
| |
| font-weight: 500;
| |
| text-align: center;
| |
| }
| |
| | |
| .home-card__background:hover:before {
| |
| box-shadow: 0 0 50px 20px rgba(0, 180, 255, 0.6);
| |
| transform: scale(1.05);
| |
| } | | } |
