Dantes (обсуждение | вклад) Нет описания правки |
Dantes (обсуждение | вклад) Нет описания правки |
||
(не показаны 2 промежуточные версии этого же участника) | |||
Строка 1: | Строка 1: | ||
.race-box { | .race-box { | ||
border: 2px solid # | border: 2px solid #411144; | ||
padding: 10px; | padding: 10px; | ||
display: inline-block; | display: inline-block; | ||
background-color: # | background-color: #3133; | ||
margin: 10px; | margin: 10px; | ||
text-align: center; | text-align: center; | ||
Строка 10: | Строка 10: | ||
border-radius: 10px; | border-radius: 10px; | ||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); | box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); | ||
transition: | transition: all 0.3s ease-out; | ||
overflow: hidden; | overflow: hidden; | ||
cursor: pointer; | |||
} | } | ||
Строка 36: | Строка 37: | ||
.race-box:hover { | .race-box:hover { | ||
background-color: # | background-color: #444; | ||
transform: scale(1.05); | transform: scale(1.05); | ||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); | ||
Строка 43: | Строка 44: | ||
.race-box:hover .race-name { | .race-box:hover .race-name { | ||
opacity: 1; | opacity: 1; | ||
} | |||
.info-block { | |||
display: none; | |||
background-color: #333; | |||
color: #fff; | |||
padding: 20px; | |||
margin-top: 20px; | |||
border-radius: 10px; | |||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); | |||
} | |||
.info-block h3 { | |||
margin-top: 0; | |||
} | |||
.info-block p { | |||
margin: 5px 0; | |||
} | } |
Версия от 10:29, 18 января 2025
.race-box { border: 2px solid #411144; padding: 10px; display: inline-block; background-color: #3133; margin: 10px; text-align: center; width: 120px; height: 160px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); transition: all 0.3s ease-out; overflow: hidden; cursor: pointer; } .race-box img { width: 100px; height: 100px; border-radius: 8px; transition: transform 0.3s ease; } .race-box img:hover { transform: scale(1.1); } .race-box .race-name { color: #f1f1f1; font-size: 14px; margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; opacity: 0.85; } .race-box:hover { background-color: #444; transform: scale(1.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); } .race-box:hover .race-name { opacity: 1; } .info-block { display: none; background-color: #333; color: #fff; padding: 20px; margin-top: 20px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); } .info-block h3 { margin-top: 0; } .info-block p { margin: 5px 0; }