LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

*Note: Use Photos with Transparent Background

  • UI Designer

    John Doe

    UI Designer

    UI Designer

    John Doe

    UI Designer

    UI Designer

    John Doe

    UI Designer

  • UI Designer

    John Doe

    UI Designer

    UI Designer

    John Doe

    UI Designer

    UI Designer

    John Doe

    UI Designer

  • UI Designer

    John Doe

    UI Designer

    UI Designer

    John Doe

    UI Designer

    UI Designer

    John Doe

    UI Designer

Who Are We?

Meet the Entire Team

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci quae nesciunt officia! Autem, nam eum voluptatem, esse voluptatibus deleniti tempora laboriosam sequi pariatur, explicabo itaque. Fuga, deserunt? Repudiandae, neque qui.

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

body {
	font-family: 'Roboto Slab', serif;
	font-size: 14px;
	line-height: 1.67;
	color: #444;
	padding: 60px 0;
	background-color: #eee;
}

a {
	color: #e45245;
}

a:hover {
	text-decoration: none;
}

/*  Team Starts */
.team-members {
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.team-members li > div {
	float: left;
	width: 20%;
}

.team-members li:nth-child(2) > div:first-child {
	margin-left: 20%;
}

.team-members li:last-child > div:first-child {
	margin-left: 40%;
}

.member-details > div {
	background-color: #ddd;
	margin: 5px;
}
.member-details img {
	-webkit-transform: rotate(45deg) translate(0, 15px) scale(1.2);
	        transform: rotate(45deg) translate(0, 15px) scale(1.2);
	display: block;
	width: 100%;
	height: 100%;
}

/* hover content - style */
.member-details > div {
	position: relative;
	overflow: hidden;
}

.member-info {
	position: absolute;
	top: 50%;
	-webkit-transform: rotate(45deg) translate(-12px, 15px);
	        transform: rotate(45deg) translate(-12px, 15px);
	left: 0;
	right: 0;
	z-index: 2;
	text-align: center;
}

.member-info h3,
.member-info p {
	margin: 0;
	color: #fff;
	position: relative;
	opacity: 0;
	visibility: hidden;
}

.member-info h3 {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 400;
	top: -100px;
}

.member-info p {
	font-weight: 300;
	font-size: 12px;
	bottom: -150px;
}

.member-details > div:after {
	content: '';
	background-image: -webkit-linear-gradient(45deg, rgba(228, 82, 69, .8) 50%, transparent 50%);
	background-image: linear-gradient(45deg, rgba(228, 82, 69, .8) 50%, transparent 50%);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}

/* hover content - onhover */
.member-details *,
.member-details > div:after {
	cursor: pointer;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}

.member-details:hover *,
.member-details:hover > div:after {
	opacity: 1;
	visibility: visible;
}

.member-details:hover .member-info h3 {
	top: 0;
}

.member-details:hover .member-info p {
	bottom: 0;
}

/* Team overview */
.team-overview {
	padding-right: 15px;
}
.team-overview h2 {
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 5px;
}

.team-overview > a {
	margin-bottom: 30px;
	display: block;
}

.team-overview > a:before {
	content: '';
	width: 10px;
	height: 2px;
	position: relative;
	top: -3px;
	margin-right: 5px;
	background-color: #ccc;
	display: inline-block;
}


/* For centering elements - optional - Can use table,tablecell instead */
.flex-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.flex-center > div:first-child {
	-webkit-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
}

/* RESPONSIVE */
@media only screen and (max-width : 992px) {
	.sm-no-flex {
		display: block;
	}
	.sm-no-float {
		float: none !important;
	}
	.sm-text-center {
		text-align: center;
	}
}

@media only screen and (max-width : 550px) {
	.team-members li {
		text-align: center;
	}
	.team-members li > div {
		float: none;
		display: inline-block;
		width: 30%;
		margin: 0 !important;
	}
	.team-members {
		-webkit-transform: rotate(0);
		        transform: rotate(0);
	}
	.member-details img {
		-webkit-transform: rotate(0) translate(0, 0);
		        transform: rotate(0) translate(0, 0);
	}
	.team-overview {
		padding: 15px;
	}
	
}

@media only screen and (max-width : 399px) {
	.team-members li > div {
		width: 48%;
	}
}
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID