LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

description

CSS
/*========================*/
/* Default styles
/*========================*/
section {
	font-family: Tahoma;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
	background-color: #ececec;
}
.box {
	height: 280px;
	display: table;
	overflow: hidden;
	position: relative;
}
.box img {
	height: 100%;
}
.box .hover-box-bg {
	transition: 0.3s;
	display: table;
	width: 100%;
	opacity: 0.8;
	position: absolute;
	z-index: 10;
	height: 100%;
	top: -280px;
	background-color: #fff;
}
.box .hover-box {
	display: table;
	width: inherit;
	height: 280px;
	width: 100%;
	position: absolute;
	z-index: 20;
	top: 280px;
	transition: 0.3s;
}

.box:hover .hover-box,
.box:hover .hover-box-bg {
		top: 0;
}

.box .hover-box p {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
JS
/*

	I must do same hover effect as here:
	https://0.s3.envato.com/files/54173789/index.html
	
	[ Overlay Rolling(top), Pop Up Position: y-reverse ]
	
*/
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv