<!-- Dribbble Inspiration - https://dribbble.com/shots/4889899-hover-infos -->

<div class="container">
	<div class="card">
		<div class="card--image">
			<img src="https://source.unsplash.com/-HxIhfS_dUk" alt="image">
		</div>
		<div class="card--info info--1">
			<span class="info--text">SPACIOUS</span>
			<div class="icon">
				<ion-icon name="add-outline"></ion-icon>
			</div>
			<div class="info--image">
				<img src="https://source.unsplash.com/-HxIhfS_dUk" alt="info image">
			</div>
		</div>
		<div class="card--info info--2">
			<span class="info--text">ACCESSIBLE</span>
			<div class="icon">
				<ion-icon name="add-outline"></ion-icon>
			</div>
			<div class="info--image">
				<img src="https://source.unsplash.com/-HxIhfS_dUk" alt="info image">
			</div>
		</div>
	</div>
</div>


<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #db747a;
	overflow: hidden;
}

.card {
	position: relative;
	width: 260px;
	height: 320px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.014), 0 6.7px 5.3px rgba(0, 0, 0, 0.02),
		0 12.5px 10px rgba(0, 0, 0, 0.025), 0 22.3px 17.9px rgba(0, 0, 0, 0.03),
		0 41.8px 33.4px rgba(0, 0, 0, 0.036), 0 100px 80px rgba(0, 0, 0, 0.05);

	&--image {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		img {
			width: 140%;
			height: 140%;
			object-fit: cover;
		}
	}

	&--info {
		--size: 20px;
		width: var(--size);
		height: var(--size);
		background: rgba(0, 0, 0, 0.75);
		border-radius: 2px;
		position: absolute;
		transition: width 550ms ease, height 550ms ease, right 550ms ease, background 550ms ease;
		overflow: hidden;
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.014), 0 6.7px 5.3px rgba(0, 0, 0, 0.02),
			0 12.5px 10px rgba(0, 0, 0, 0.025), 0 22.3px 17.9px rgba(0, 0, 0, 0.03),
			0 41.8px 33.4px rgba(0, 0, 0, 0.036), 0 100px 80px rgba(0, 0, 0, 0.05),
			0 0px 2.2px rgba(0, 0, 0, 0.045), 0 0px 5.3px rgba(0, 0, 0, 0.065),
			0 0px 10px rgba(0, 0, 0, 0.08), 0 0px 17.9px rgba(0, 0, 0, 0.095),
			0 0px 33.4px rgba(0, 0, 0, 0.115), 0 0px 80px rgba(0, 0, 0, 0.16),
			0 0.2px 2.2px rgba(0, 0, 0, 0.014), 0 0.6px 5.3px rgba(0, 0, 0, 0.02),
			0 1.1px 10px rgba(0, 0, 0, 0.025), 0 2px 17.9px rgba(0, 0, 0, 0.03),
			0 3.8px 33.4px rgba(0, 0, 0, 0.036), 0 9px 80px rgba(0, 0, 0, 0.05);

		&::after {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(
				to top,
				rgba(0, 0, 0, 0.65) 0%,
				rgba(0, 0, 0, 0.25) 50%,
				transparent 100%
			);
			z-index: 1;
			opacity: 0;
			transition: opacity 550ms ease;
		}

		&.info--1 {
			bottom: 47%;
			right: 80%;
			.info--image {
				img {
					top: -80%;
					left: -20%;
				}
			}
		}

		&.info--2 {
			bottom: 25%;
			right: 15%;
			.info--image {
				img {
					right: -20%;
					bottom: -80%;
				}
			}
		}

		.icon {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			justify-content: center;
			align-items: center;
			ion-icon {
				color: white;
			}
		}

		.info--text {
			display: block;
			position: absolute;
			left: 10%;
			bottom: 5%;
			font-size: 0.55rem;
			letter-spacing: 1px;
			font-family: "Montserrat";
			font-weight: bold;
			color: #fff;
			white-space: nowrap;
			z-index: 2;
			opacity: 0;
			transform: translateY(25%);
			transition: opacity 250ms ease, transform 250ms ease;
		}

		.info--image {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			img {
				position: absolute;
				width: 340%;
				height: 340%;
				object-fit: cover;
				opacity: 0;
				transition: opacity 550ms ease;
			}
		}
	}

	&:hover {
		.card--info {
			--size: 100px;
			&::after {
				opacity: 1;
			}
			&.info--1 {
				right: 71%;
				transition-delay: 100ms;
			}
			&.info--2 {
				right: -10%;
			}
			.info--image {
				img {
					opacity: 1;
				}
			}
			.info--text {
				transition-delay: 550ms;
				opacity: 1;
				transform: translateY(0%);
			}
		}
	}
}

.support{
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
	a{
		margin: 0 10px;
		color: #fff;
		font-size: 1.8rem;
		backface-visibility: hidden;
		transition: all 150ms ease;
		&:hover{
			transform: scale(1.1);
		}
	}

}

// NO JS TODAY.