One Hat Cyber Team

Your IP : 108.162.216.16

Server IP : 188.114.97.7

Server : Linux advantage-project 5.14.0-503.26.1.el9_5.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Feb 19 16:28:19 UTC 2025 x86_64

Server Software : Apache/2.4.62 (Rocky Linux) OpenSSL/3.2.2

PHP Version : 8.3.17

Buat File | Buat Folder

Dir : ~/var/www/html/theme/dev/components/person/

View File Name : _person-poster.scss

// Base
.person-poster {
	position: relative;
	display: block;
	max-width: 370px;
	min-height: 370px;
	margin-left: auto;
	margin-right: auto;
	color: $context-light;
	box-shadow: $box-shadow;
	will-change: transform;
	z-index: 0;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: $gray-800;
		opacity: .4;

		@include media-breakpoint-up(xl) {
			display: none;
		}
	}

	.person-media {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		transition: $transition-base;
		overflow: hidden;
	}

	.person-btn {
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		font-size: 24px;
		color: $primary;
		background-color: $white;
		will-change: transform;
	}

	.person-content {
		position: absolute;
		bottom: 0;
		padding: 7px 25px 47px;
		z-index: 1;

		@include media-breakpoint-up(xl) {
			padding: 7px 30px 47px 43px;
		}
	}

	.person-title {
		color: $white;
		letter-spacing: -.01em;
	}

	.person-meta {
		font-weight: 300;
		opacity: .6;
	}

	&:hover {
		color: $context-light;
	}

	* + .person-text { margin-top: 14px }
}

.person-poster-container {
	> [class*='col-']:hover {
		z-index: 1;
	}
}


// Media
@include media-breakpoint-up( sm ) {
	.person-poster {
		padding-bottom: 117%;
		max-width: 100%;
		min-height: 0;
	}
}

@include media-breakpoint-up(xl) {
	.person-poster {
		.person-btn {
			width: 60px;
			height: 60px;
		}
	}

	.desktop {
		.person-poster {
			box-shadow: none;
			transition: 0.4s;

			.person-title {
				transform: translateY( 47px );
				transition: $transition-base;
			}

			.person-text {
				transform: translateY( 20px );
				transition: $transition-base;
				opacity: 0;
			}

			.person-btn {
				transition: 0.15s;
				transform: translate( 100%, 100% );
			}

			&:hover {
				z-index: 1;
				box-shadow: 0 20px 30px rgba(16, 19, 28, 0.2);

				.person-media {
					transform: scale( 1.05 );
				}

				.person-title {
					transform: translateY( 0 );
				}

				.person-text {
					transform: translateY( 0 );
					transition: 0.4s 0.15s;
					opacity: 1;
				}

				.person-btn {
					transition: 0.4s 0.25s;
					transform: translate( 2%, 2% );
				}
			}
		}
	}
}