Пример:
HTML:
Карточка:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="atuinCard"> <div class="atuinCard-image"> <img src="photo.webp" alt="image"> <div class="atuinCard-image-up"> <img src="photo.webp" alt="image"> </div> </div> <div class="atuinCard-content"> <a href="#link" class="atuinCard-title">Заголовок карточки</a> <p>Контент карточки</p> </div> </div> |
Сетка:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="atuinCard-container"> <div class="atuinCard-col"> <!-- Карточка --> </div> <div class="atuinCard-col"> <!-- Карточка --> </div> <!-- ... --> <!-- Еще колонки --> </div> |
CSS:
Карточка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
.atuinCard { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; position: relative; } .atuinCard:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } .atuinCard-image { position: relative; overflow: hidden; aspect-ratio: 2.5 / 1; } .atuinCard-image img { object-fit: cover; width: 100%; height: 100%; } .atuinCard-image-up { width: 100%; height: 100%; background: #000; z-index: 1; overflow: hidden; position: absolute; top: 0; left: 0; clip-path: polygon(75% 0,100% 0,100% 100%,50% 100%); transition: 1s; } .atuinCard-image-up img { opacity: 0.8; transform: scale(1); transition: 1s; } .atuinCard:hover .atuinCard-image-up { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } .atuinCard:hover .atuinCard-image-up img { transform: scale(1.2); opacity: 1; } .atuinCard-content { padding: 16px 20px; } .atuinCard-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 12px; line-height: 1.3; position: relative; display: inline-block; transition: color 0.4s; } .atuinCard-title:hover { color: #337AB7; } .atuinCard-title::before { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: #337AB7; transition: width 0.4s ease 0.1s; } .atuinCard:hover .atuinCard-title::before { width: 100%; } .atuinCard-content p { line-height: 1.4; font-size: 16px; margin: 0; } @media (min-width: 992px) { .atuinCard-title { font-size: 20px; } .atuinCard-content p { font-size: 18px; } } |
Сетка:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.atuinCard-container { display: flex; flex-wrap: wrap; justify-content: center; margin: 10px -10px; } .atuinCard-container *, .atuinCard-container *::before, .atuinCard-container *::after { box-sizing: border-box; } .atuinCard-col { width: 100%; padding: 10px; } @media (min-width: 576px) { .atuinCard-col { width: 100%; } } @media (min-width: 768px) { .atuinCard-col { width: 50%; } } @media (min-width: 992px) { .atuinCard-col { width: 33.33%; } } @media (min-width: 1200px) { .atuinCard-col { width: 33.33%; } } @media (min-width: 1400px) { .atuinCard-col { width: 33.33%; } } |
Добавить комментарий: