?? GreyFile — Mystic File Browser

Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules/shortcodes/


?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules

?? Viewing: _interactive-banner.scss

/* ==========================================================================
   Interactive Banner start style
   ========================================================================== */
.edgtf-interactive-banner-holder {
	position: relative;

	.edgtf-interactive-banner-image {
		img {
			vertical-align: middle;
		}
	}

	.edgtf-interactive-banner-text {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: #fff;
		box-sizing: border-box;
		padding: 25px;
		z-index: 25;

		.edgtf-interactive-banner-text-inner {
			border: 2px solid rgba(255, 255, 255, 0.6);
			display: block;
			height: 100%;
			width: 100%;
			position: relative;
			box-sizing: border-box;
			padding: 20px;
		}

	}
	.edgtf-interactive-banner-shader {
		background-color: rgba(28, 28, 28, 0.4);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		z-index: 20;

	}

	.edgtf-interactive-banner-initial,
	.edgtf-interactive-banner-hover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: table;
		vertical-align: middle;
	}

	.edgtf-interactive-banner-initial-content,
	.edgtf-interactive-banner-hover-content {

		width: 100%;
		height: 100%;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		color: #fff;
		@include edgtfTransition(opacity 0.3s ease-in-out);
	}

	.edgtf-interactive-banner-initial-content {

		.edgtf-interactive-banner-initial-title {
			font-size: 43px;
			line-height: 50px;
			font-weight: 600;
			text-transform: uppercase;
			color: #fff;
		}

	}
	.edgtf-interactive-banner-hover-content {

		opacity: 0;
		padding: 0 60px;

		.edgtf-interactive-banner-hover-title {

			color: #fff;
			font-size: 18px;
			text-transform: uppercase;
			font-weight: 700;
			margin-bottom: 25px;
			display: block;

		}
	}

	&:hover {
		.edgtf-interactive-banner-hover-content {
			opacity: 1;
		}
		.edgtf-interactive-banner-initial-content {
			opacity: 0;
		}
	}
}
/* ==========================================================================
   End of Interactive Banner style
   ========================================================================== */

??

??