Пример:
HTML:
Карточка:
123456789
<div class="atuinCard"> <div class="atuinCard-image"> <img src="image.jpg" alt="image"> <strong>Заголовок карточки</strong> </div> <div class="atuinCard-txt"> <p>Контент карточки</p> </div></div>
Сетка:
12345678910
<div class="atuinCard-container"> <div class="atuinCard-col"> <!-- Карточка --> </div> <div class="atuinCard-col"> <!-- Карточка --> </div> <!-- ... --> <!-- Еще колонки --> </div>
CSS:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
/* Сетка */ .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: 50%; }}@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: 25%; }} /* Карточка */.atuinCard { position: relative; height: 100%; z-index: 1; border-radius: 12px; overflow: hidden; border: 2px solid #ddd; transition: 0.5s; background: #fff;} .atuinCard-image { position: relative; aspect-ratio: 1.2 / 1; overflow: hidden;}.atuinCard-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s;}.atuinCard-image strong { color: #337AB7; font-size: 18px; line-height: 1.3; text-transform: uppercase; padding: 80px 16px 36px; text-align: center; display: block; position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); text-shadow: 0 0 22px rgba(255, 255, 255, 0.8), 0 2px 10px rgba(255, 255, 255, 1); transition: 0.5s; font-weight: 600;}.atuinCard-txt { transform: translateY(-8px); text-align: center;}.atuinCard-txt p { font-size: 16px; line-height: 1.3; padding: 0 16px; margin: 0;}.atuinCard:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(0, 0, 0, 0.1);}.atuinCard:hover .atuinCard-image img { transform: scale(1.1);}.atuinCard:hover .atuinCard-image strong { padding: 120px 16px 66px; color: #000;}@media (min-width: 576px) { .atuinCard-txt p { font-size: 18px; }}
Смотрите также:
Добавить комментарий:
Ваш комментарий отправлен!
Комментарии:
|
1 2 3 4 5 6 7 8 9 |
<div class="atuinCard"> <div class="atuinCard-image"> <img src="image.jpg" alt="image"> <strong>Заголовок карточки</strong> </div> <div class="atuinCard-txt"> <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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
/* Сетка */ .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: 50%; } } @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: 25%; } } /* Карточка */ .atuinCard { position: relative; height: 100%; z-index: 1; border-radius: 12px; overflow: hidden; border: 2px solid #ddd; transition: 0.5s; background: #fff; } .atuinCard-image { position: relative; aspect-ratio: 1.2 / 1; overflow: hidden; } .atuinCard-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; } .atuinCard-image strong { color: #337AB7; font-size: 18px; line-height: 1.3; text-transform: uppercase; padding: 80px 16px 36px; text-align: center; display: block; position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); text-shadow: 0 0 22px rgba(255, 255, 255, 0.8), 0 2px 10px rgba(255, 255, 255, 1); transition: 0.5s; font-weight: 600; } .atuinCard-txt { transform: translateY(-8px); text-align: center; } .atuinCard-txt p { font-size: 16px; line-height: 1.3; padding: 0 16px; margin: 0; } .atuinCard:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(0, 0, 0, 0.1); } .atuinCard:hover .atuinCard-image img { transform: scale(1.1); } .atuinCard:hover .atuinCard-image strong { padding: 120px 16px 66px; color: #000; } @media (min-width: 576px) { .atuinCard-txt p { font-size: 18px; } } |
Смотрите также:
Добавить комментарий:
Ваш комментарий отправлен!

А как то можно такую красоту в карусель обернуть? Подскажите пожалуйста способ
Код примерно для такого и дан, вставляйте HTML карточки в слайдер и все