✏️ Editing: _our-team-2.scss Writable

.ova-our-team-2 {
	overflow: hidden;
	.image {
		position: relative;
		width: 100%;
		max-height: 411px;
		overflow: hidden;
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: top left;
		}

.view-more {
			position: absolute;
			bottom: -100%;
			left: 0;
			font-size: 14px;
			font-weight: 700;
			color: #FFFFFF;
			letter-spacing: 0.19em;
			text-transform: uppercase;
			background-color: #FF5348;
			padding: 9px 12px;
			transition: .8s;
			z-index: 9;
		}

.socials {
			margin: 0;
			padding: 19px 14px;
			width: 52px;
			border-radius: 34px 34px 0px 0px;
			list-style: none;
			position: absolute;
			right: 24px;
			bottom: -100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			row-gap: 5px;
			transition: .8s;
			z-index: 9;
			li a {
				color: #18181D;
				transition: all linear 0.3s;
			}

li:hover a {
				color: #FF5348;
			}
		}
	}

.info {
		padding-top: 30px;
		display: flex;
		align-items: center;

.left h5 {
			color: #fff;
			font-size: 22px;
			font-weight: 600;
			text-transform: capitalize;
			margin: 0;
		}

.left p {
			font-size: 15px;
			color: #FF5348;
			font-weight: 500;
			text-transform: uppercase;
			margin: 0;
			margin-top: 8.5px;
		}

.right {
			margin-left: auto;
		}

.right .btn-plus {

position: relative;
			margin: 0;
			margin-right: 28.5px;
			padding: 0;
			outline: none;
			border: 1px solid #5D5D70;
			display: inline-block;
			width: 42px;
			height: 42px;
			background-color: #17161F;
			border-radius: 50%;
			cursor: pointer;

&:after {
				content: '';
				position: absolute;
				transform: translate(-50%, -50%);
				height: 2px;
				width: 30%;
				background: #5D5D70;
				top: 50%;
				left: 50%;
			}

&:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: #5D5D70;
				height: 30%;
				width: 2px;
			}
		}
	}

}

.ova-our-team-2:hover {

.image {

.view-more {
			bottom: 0;
		}

.socials {
			bottom: 0;
		}
	}

.info {

.right .btn-plus {

border: 1px solid #fff;
			background-color: #fff;
			transform: rotate(45deg);
		}
	}
}

@media screen and (max-width: 768px) {
	
	.ova-our-team-2 {

.image {

max-height: 300px;
			
		}
	}
}

🔐 Sid Gifari File Manager Pro