Карточки и блоки #3

Пример:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML:

Карточка:

<div class="atuinCard">		
	<div class="atuinCard-image">
		<img src="image.jpg" alt="image">
		<strong>Заголовок карточки</strong>
	</div>
	<div class="atuinCard-txt">
		<p>Контент карточки</p>
	</div>
</div>

<strong>Заголовок карточки</strong>

</div>

<p>Контент карточки</p>

</div>

Сетка:

<div class="atuinCard-container">
	<div class="atuinCard-col">
		<!-- Карточка -->
	</div>	
	<div class="atuinCard-col">
		<!-- Карточка -->
	</div>	
	<!-- ... -->
	<!-- Еще колонки  -->		
</div>

</div>

</div>

</div>

CSS:

/* Сетка */		
.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;
	}
}

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;

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 04.04.2025 / Обновлено: 26.04.2025
Рубрики: Коллекция карточек и блоков
296 просмотров

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!