MediaWiki:Citizen.css: различия между версиями
Askell (обсуждение | вклад) Нет описания правки |
Askell (обсуждение | вклад) Нет описания правки |
||
| Строка 941: | Строка 941: | ||
background-color: #ffffff; | background-color: #ffffff; | ||
border-radius: 10px; | border-radius: 10px; | ||
overflow: hidden; /* | overflow: hidden; /* Скрываем все, что выходит за пределы */ | ||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */ | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Легкая тень */ | ||
} | } | ||
| Строка 952: | Строка 952: | ||
.card-img-top:hover { | .card-img-top:hover { | ||
transform: scale(1. | transform: scale(1.05); /* Легкое увеличение картинки при наведении */ | ||
} | |||
/* Подсказка для наведения */ | |||
.card-img-top::after { | |||
content: "Наведи сюда, чтобы узнать больше"; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
font-size: 18px; | |||
color: rgba(255, 255, 255, 0.8); /* Белый с прозрачностью */ | |||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Легкая тень для текста */ | |||
font-weight: bold; | |||
opacity: 0; | |||
transition: opacity 0.3s ease; | |||
} | |||
/* Показываем подсказку при наведении */ | |||
.card-img-top:hover::after { | |||
opacity: 1; | |||
} | } | ||
| Строка 965: | Строка 985: | ||
color: #212121; | color: #212121; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
} | } | ||
| Строка 975: | Строка 990: | ||
.card-hover-info { | .card-hover-info { | ||
position: absolute; | position: absolute; | ||
top: | top: 50%; | ||
left: 0; | left: 0; | ||
width: 100%; | width: 100%; | ||
height: | height: 50%; /* Половина карточки */ | ||
background-color: rgba(0, 0, 0, 0.6); /* Темная плашка с полупрозрачностью */ | background-color: rgba(0, 0, 0, 0.6); /* Темная плашка с полупрозрачностью */ | ||
color: #ffffff; | color: #ffffff; | ||
| Строка 986: | Строка 1001: | ||
align-items: center; | align-items: center; | ||
opacity: 0; | opacity: 0; | ||
transition: opacity 0.3s ease; /* Плавное появление */ | transition: opacity 0.3s ease, transform 0.3s ease; /* Плавное появление */ | ||
transform: translateY(-100%); /* Плашка будет скрыта */ | |||
} | } | ||
.card:hover .card-hover-info { | .card:hover .card-hover-info { | ||
opacity: 1; /* Плашка становится видимой | opacity: 1; /* Плашка становится видимой */ | ||
transform: translateY(0); /* Плашка скользит сверху */ | |||
} | } | ||