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

HTML:

Карточка:

<div class="atuinCard">
	<div class="atuinCard-img">
		<img src="photo.jpg" alt="photo">
	</div>
	<div class="atuinCard-content">
		<p>Контент карточки</p>
	</div>
</div>

</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: 33.33%;	
	}
}
@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 {
	height: 100%;
	position: relative;
	border-radius: 15px;
	border: 4px solid #fff;
	overflow: hidden;
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.atuinCard-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	border-radius: 15px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}
.atuinCard-img:before,
.atuinCard-img:after {
	content: "";
	background: #0D2FAD;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	transition: clip-path 0.6s ease-in-out;
	clip-path: circle(100% at 50% 50%);
}
.atuinCard-img:before {
	background: #337AB7;
	transition: clip-path 0.7s ease-in-out;
	clip-path: circle(100% at 50% 50%);
}
.atuinCard-img img {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
	transition: clip-path 0.5s ease-in-out;
	clip-path: circle(100.0% at 50% 50%);
}
.atuinCard:hover .atuinCard-img:before {
	clip-path: circle(0% at 35% 20%);
}
.atuinCard:hover .atuinCard-img:after {
	clip-path: circle(0% at 75% 60%);
}
.atuinCard:hover .atuinCard-img img {
	clip-path: circle(0% at 50% 50%);
}
.atuinCard-content {
	position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
	min-height: 220px;
	height: 100%;
	padding: 10px 16px 0;
	background: #FFF;	
	border-radius: 15px;
}
.atuinCard-content p {
	margin-bottom: 10px;
	line-height: 1.3;
	font-size: 15px;
}
@media (min-width: 992px) {
	.atuinCard-content p {
		font-size: 18px;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

/* Сетка */

.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: 33.33%;

}

@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 {

height: 100%;

position: relative;

border-radius: 15px;

border: 4px solid #fff;

overflow: hidden;

box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

}

.atuinCard-img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

overflow: hidden;

border-radius: 15px;

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);

pointer-events: none;

}

.atuinCard-img:before,

.atuinCard-img:after {

content: "";

background: #0D2FAD;

width: 100%;

height: 100%;

position: absolute;

z-index: 2;

top: 0;

left: 0;

transition: clip-path 0.6s ease-in-out;

clip-path: circle(100% at 50% 50%);

}

.atuinCard-img:before {

background: #337AB7;

transition: clip-path 0.7s ease-in-out;

clip-path: circle(100% at 50% 50%);

}

.atuinCard-img img {

position: absolute;

top: 0;

right: 0;

z-index: 10;

height: 100%;

width: 100%;

object-fit: cover;

object-position: center center;

transition: clip-path 0.5s ease-in-out;

clip-path: circle(100.0% at 50% 50%);

}

.atuinCard:hover .atuinCard-img:before {

clip-path: circle(0% at 35% 20%);

}

.atuinCard:hover .atuinCard-img:after {

clip-path: circle(0% at 75% 60%);

}

.atuinCard:hover .atuinCard-img img {

clip-path: circle(0% at 50% 50%);

}

.atuinCard-content {

position: relative;

display: flex;

flex-flow: column;

align-items: center;

justify-content: center;

min-height: 220px;

height: 100%;

padding: 10px 16px 0;

background: #FFF;

border-radius: 15px;

}

.atuinCard-content p {

margin-bottom: 10px;

line-height: 1.3;

font-size: 15px;

}

@media (min-width: 992px) {

.atuinCard-content p {

font-size: 18px;

}

Карточки имеют минимальную высоту в 220 точек min-height: 220px, а максимальная зависит от количества контента у одной из них в ряду.

За основу взято решение, найденное на codepen.io у пользователя konradstepien

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

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

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

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

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

Опубликовано: 14.05.2025
Рубрики: Коллекция карточек и блоков
279 просмотров

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

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

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

Пример:

HTML:

Карточка:

Сетка:

CSS:

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

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