golden hour

/home/godaofbq/hyperxpod.com/wp-content/plugins/essential-blocks/src/blocks/nft-gallery/src

File/Folder	Size	Actions
attributes.js	7.86 KB
constants	-
deprecated.js	3.82 KB
edit.js	11.72 KB
frontend.js	3.79 KB
icon.svg	1.15 KB
index.js	864 B
inspector.js	19.9 KB
save.js	1.07 KB
style.js	19.06 KB
style.scss	3.53 KB
template-components	-

Edit: style.scss

.eb-nft-gallery-wrapper {
	overflow: hidden;
	position: relative;

.eb_nft_content_wrap {
		.eb_nft_item {
			box-shadow: rgb(0 0 0 / 9%) 0px 4px 15px;
			padding: 15px;
			border-radius: 5px;
			position: relative;
			overflow: hidden;
			transition: 0.3s ease-in-out;

&:hover {
				box-shadow: rgb(214 214 214) 0px 4px 15px;
			}

.eb_nft_thumbnail {
				line-height: 0;
				text-align: center;

img {
					width: auto;
					object-fit: cover;
				}
			}

.eb_nft_creator {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				gap: 10px;

a {
					text-decoration: none;
				}
			}

.eb_nft_price {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 5px;

.ebnft_currency {
					line-height: 1;

svg {
						height: 15px !important;
						width: auto !important;
					}
				}

.ebnft_price {
					line-height: 1;
				}
			}

.eb_nft_button {
				transition: 0.3s ease-in-out;

button {
					display: block;
					padding: 0;
					border: 0;
					box-shadow: unset;
					background-color: transparent;

a {
						text-decoration: none;
						display: block;
						border-radius: 4px;
					}
				}
			}
		}

&.eb_nft_grid {
			grid-template-columns: repeat(3, 1fr);
			display: grid;
			grid-column-gap: 15px;
			grid-row-gap: 15px;

&.preset-1 {
				.eb_nft_item {

.eb_nft_thumbnail {
						overflow: hidden;

img {
							transition-duration: 0.4s;
						}
					}

.eb_nft_button {
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						opacity: 0;
						visibility: hidden;
						transform: translate(0px, 30px);

button {
							width: 100%;

a {
								border-top-left-radius: 0;
								border-top-right-radius: 0;
							}
						}
					}

&:hover {
						.eb_nft_thumbnail {
							img {
								transform: scale(1.10);
							}
						}

.eb_nft_button {
							opacity: 1;
							visibility: visible;
							transform: translate(0px, 0px);
						}
					}
				}
			}

&.preset-2 {
				.eb_nft_item {

.eb_nft_price_wrapper {
						margin-bottom: 15px;
					}

.eb_nft_thumbnail img {
						width: 100%;
						object-fit: cover;
					}
				}
			}

&.preset-3 {
				.eb_nft_item {
					padding: 0 !important;

.eb_nft_thumbnail img {
						width: 100%;
						object-fit: cover;
						margin-bottom: 0 !important;
					}

.eb_nft_content {
						padding: 15px;
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
						visibility: hidden;
						transition: 0.3s ease-in-out;
						transform: translate(0px, 100%);
						z-index: 999;
						background-color: rgb(237 236 246 / 90%);
						box-sizing: border-box;
					}

.eb_nft_price_wrapper {
						margin-bottom: 15px;
					}

&:hover {

.eb_nft_content {
							opacity: 1;
							visibility: visible;
							transform: translate(0px, 0px);
						}
					}
				}
			}
		}

&.eb_nft_list {
			grid-template-columns: repeat(1, 1fr);
			display: grid;
			grid-column-gap: 15px;
			grid-row-gap: 15px;

.eb_nft_item {
				display: flex;
				gap: 15px;
				align-items: flex-start;
				justify-content: flex-start;
			}

.eb_nft_price_wrapper {
				margin-bottom: 15px;
			}

.eb_nft_thumbnail {
				img {
					object-fit: cover;
				}
			}

&.preset-1 {
				&.eb_nft_item {
					.eb_nft_thumbnail {

img {
							object-fit: cover;
						}
					}
				}
			}
		}

&.nft_collections.preset-1 {
			.eb_nft_content {
				margin-bottom: 35px;
			}
		}
	}
}